页面缩放与CSS透视下Div裁切问题求助

在一个通过CSS perspective 实现的3D场景页面中，道路元素（一个使用background-repeat: repeat-y重复纹理的Div）在正常显示状态下无异常，但页面缩放后会逐渐消失；在iPhone Safari中问题更为严重，道路纹理甚至无法加载。而将CSS变换中的rotateX(90deg)替换为rotateX(90.00000001deg)后，Safari中的问题即可修复。

页面缩放前后的异常效果如下：

这是浏览器3D渲染引擎在处理极端角度变换时的精度缺陷与渲染优化逻辑共同导致的：

• 零面积元素剔除优化：当元素被rotateX(90deg)完全旋转至与视平面垂直时，其在视口中的理论投影面积为0。浏览器的渲染引擎为了提升性能，会触发零可见面积元素剔除的优化，直接跳过该元素的渲染。页面缩放时，视口计算的精度误差被放大，导致原本应该显示的元素被错误判定为零面积，从而出现消失的现象。
• WebKit快速渲染路径的bug：Safari基于WebKit引擎，在处理90deg这类整数值正交角度时，会启用专门的快速渲染路径以提升性能，但该路径对带有重复背景纹理的元素存在处理bug——当元素处于完全垂直视平面的状态时，纹理坐标的计算出现异常，导致纹理无法被正确采样和渲染。而rotateX(90.00000001deg)的微小角度偏移，会让引擎放弃快速正交路径，转而使用通用的3D变换计算逻辑，从而避开了这个bug。
• 浮点运算精度限制：浏览器对CSS变换角度值采用浮点运算存储，当角度恰好为90°时，在计算元素投影矩阵的过程中可能出现精度丢失，导致渲染引擎误判元素的可见性；微小的角度偏移让计算结果脱离了临界值，恢复了正常的可见性判定逻辑。

内容的提问来源于stack exchange，提问作者kopiro