Как предотвратить сбои рендеринга в Firefox, вызванные манипулированием innerHTML + 3D преобразованием - PullRequest
Новая
       29

Как предотвратить сбои рендеринга в Firefox, вызванные манипулированием innerHTML + 3D преобразованием

0 голосов
/ 12 марта 2019

Я получаю странные сбои рендеринга при использовании Firefox для отображения следующего (значительно упрощенного, чтобы удалить аспекты, не относящиеся к проблеме).

В этой форме он должен отображать 3D-преобразованный квадрат и переключать егоразмер после нажатия случайной клавиши.

При использовании Firefox квадрат (большего размера) отображается неправильно, оставляя белый пробел.

Изображение, показывающее пробел

При использовании более сложных фигур результирующие промежутки также увеличиваются в сложности.

После прокрутки, наведения курсора на другую вкладку окна, щелчка где-то внутри или снаружи окна и т. Д., Разрывзаполнено правильно.

В этом примере вы можете написать всю html-часть статически, не связываясь с ней через javascript с помощью .innerHTML, или вы можете удалить 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>
...