在滚动其父元素之前，Firefox 可能无法显示具有 CSS 透视图的元素

如何解决在滚动其父元素之前，Firefox 可能无法显示具有 CSS 透视图的元素

在 Firefox 中，在滚动其父元素之前，透视显示的元素可能无法正确显示。要查看这一点，请在 Firefox 中测试此问题末尾的代码段。

在 Chrome 和 Opera 中，中央红色 #rect 元素完整显示。在 Firefox 中，只有右下象限出现，直到您开始滚动 main 元素。

您还可以在 jsfiddle 中打开代码段，在那里将 transform 元素的 CSS 中的 #rect 行注释掉会更容易，然后重新运行代码.

自己检查：

• 当 translateZ(1.8px) 应用于红色 #rect 时，右下角只显示矩形的一个小角
• 如果应用了小于约 translateZ 的 (4.5px)，则 rect 最初根本不会出现
• 当 translateZ 大于 (5px) 时，整个矩形正确显示，就像 translateZ(0) 已应用。

问题：这里发生了什么？有没有办法解决这个怪癖？

body {
    margin: 0;
  }

  main {
    width:100vw;
    height:100vh;
    perspective: 10px;
    overflow-x: auto;
  }

  div {
    position: absolute;
    background-color: #f00;
  }
  
  #horizontal {
    width: 150vw;
    height: 1px;
    top: 50%;
  }

  #vertical {
    width: 1px;
    height: 100%;
    left: 50vw;
  }
   
  #rect {
    height: 10%;
    width: 10%;
    top: 45%;
    left: 45%;
    opacity: 0.75;

    transform: translateZ(5px);   /* fully visible */
    transform: translateZ(4px);   /* Not shown */
    transform: translateZ(1.8px); /* only bottom right corner visible */
    transform: translateZ(1px);   /* only bottom right quadrant visible */
    /* transform: translateZ(0px); */   /* fully visible */
  }

<main>
  <div id="horizontal"></div>
  <div id="vertical"></div>
  <div id="rect"></div>
</main>