Question

使用Firefox显示以下网站时，我出现了奇怪的渲染故障（已大大简化以删除与该问题无关的方面）。

在这种形式下，它应该显示3D变换的正方形，并在按下随机键后切换其大小。

使用Firefox时，（较大的）正方形无法正确显示，从而留出白色空白。

使用更复杂的形状时，产生的间隙也随之增加。

滚动后，将鼠标悬停在窗口的另一个选项卡上，单击窗口内或窗口外的某处等，即可正确填充空白。

在该示例中，您可以静态编写整个html部分，而不用.innerHTML通过javascript将其弄乱，也可以从transform-style: preserve-3d;中删除.face进行修复。但这两种方法都不是真实站点的选择，因为它处理更复杂的几何图形。

您知道是什么原因导致这些故障以及如何防止它们吗？

var counter = 0;

function createSquare(w) {
  var stylesheet = document.getElementById('stylesheet').sheet;
  stylesheet.insertRule(".shape { width:" + w + "em; height:" + w + "em; }", stylesheet.cssRules.length);
  document.getElementById('shape').innerHTML = '<div class="face"></div>';
}

function create() {
  switch (counter) {
    case 0:
      createSquare(30);
      break;
    case 1:
      createSquare(50);
      break;
  }
  counter++;
  counter %= 2;
}

.wrapper {
  perspective: 1000px;
  position: absolute;
  overflow: hidden;
  width: 99.2%;
  height: 99.3%;
}

.scene,
.shape,
.face {
  position: absolute;
  transform-style: preserve-3d;
}

.scene {
  width: 100em;
  height: 100em;
  transform: rotateX(45deg);
}

.face {
  width: 100%;
  height: 100%;
  background-color: red;
}

<html>

<head>
  <style id="stylesheet">

  </style>
</head>

<body onload="create();" onkeydown="create();">
  <div class="wrapper">
    <div class="scene">
      <div id="shape" class="shape"></div>
    </div>
  </div>
</body>

</html>

如何防止由innerHTML操作+ 3D转换引起的Firefox渲染故障

0 个答案: