firefox版本: 114.0.2
threejs: 0.135.0
异常描述
火狐浏览器下 threejs 3D页面展示的 CSS3DSprite 中的 有border border-radius 的div边框显示异常
显示情况如下
正常情况下的显示是这样的：
<div></div>
div {
position: fixed;
cursor: default;
width: auto !important;
min-width: 375px;
height: 238px;
background: #0B2241B2;
border: 1px solid #00ffe9;
border-radius: 10px;
}
异常分析
正常的页面上显示 border border-radius 没有什么问题 加上个transform再试试, 看看有什么不一样
.trans {
pointer-events: auto;
user-select: none;
transform: translate(-50%, -50%) matrix3d(0.0186012, 0, 0, 0, 0, -0.0183194, 0.00322542, 0, 0, 0.173398, 0.984852, 0, 123.8, 6.777, -37.4329, 1)
}
虽然小到看不见，调整一下参数，平面展示的都正常, 样式如下：
.trans {
transform-style: preserve-3d;
pointer-events: none;
transform: matrix3d(1, 0, 0, 0, 0, -0.984852, 0.173398, 0, 0, 0.173398, 0.984852, 0, -123.8, 9.82387, 16.7132, 1);
}
那就把网站上异常的代码弄过来看看
交流-新485-东一-10322795 充电桩状态：在线 充电枪名称：交流-485-10322795-充电枪 充电枪类型：交流插接口插头(带枪线,模式 3,连接方式 C) 充电枪状态：空闲 充电枪电压： 充电枪电流：Chrome上正常，但是FF不能显示，稍加处理能显示也与上面的贴图一样;
在FF浏览器下，F12查看源代码, 删除第二层级第三层div 样式中的 transform: matrix3d(*) 再对显示的位置做调整，就有正常的显示了(可能需要搭建服务器)
终其原因就是火狐浏览器 border border-radius transform: matrix3d(…) 嵌套兼容有问题
解决方案
使用svg实现同样的背景，源码如下
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="377px" height="240px" viewBox="0 0 377 240" xmlns="http://www.w3.org/2000/svg" style="border-radius: 10px">
<defs>
<linearGradient id="grey_blue" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(87,226,215); stop-opacity:.695"/>
<stop offset="90%" style="stop-color:rgb(0,255,233); stop-opacity:0"/>
</linearGradient>
</defs>
<path d="M0 10 L0 230 A10 10 0 0 0 10 240 L367 240 A10 10 0 0 0 377 230 L377 10 A10 10 0 0 0 367 0 L10 0 A10 10 0 0 0 0 10"
style="fill: rgb(12,34,65); opacity:0.695; stroke-width:1; stroke:rgb(0,255,233)"/>
<path d="M0 25 L0 10 A10 10 0 0 1 10 0 L367 0 A10 10 0 0 1 377 10 L377 25" style="fill: url(#grey_blue)"/>
</svg>