firefox threejs 显示异常排查处理

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>