div 仅在 css 转换完成后在 iphone 上呈现（safari）

Question

在 iphone Safari 浏览器上，包含文本的 div 元素在滑动到屏幕上时不会呈现。但是，删除 div 中的文本并且它有效！

错误发生在 iphone 5 上，因此 IOS Safari 10。（我测试了 safari 11，它工作正常）

这是一个 jsFiddle，它可能解释得更好。 https://jsfiddle.net/pip36/wtkodwr6/

let button = document.getElementById('move-button');
let block = document.getElementById('red-block');
let hasMoved = false;

button.addEventListener('click', () => {
  if (hasMoved) {
    setTransform(0);
    hasMoved = false;
  } else {
    setTransform(-300);
    hasMoved = true;
  }
})

function setTransform(pixels) {
  block.style.transform = 'translateX(' + pixels + 'px)';
}

.container {
  perspective: 300px;
}

.parent {
  transform-style: preserve-3d;
}

.block {
  width: 200px;
  height: 200px;
  background: red;
  transition: transform 1s;
}

button {
  width: 200px;
  height: 50px;
}

<div class="container">
  <div class="parent">
    <div id="red-block" class="block">

      <!-- remove text and it works -->
      HELLO

    </div>
  </div>
</div>

<button id="move-button"> MOVE </button>

我将不胜感激任何帮助和可能的解决方法。非常感谢！

Answer 1

我不确定是否有人会重现这个问题，但我会post我的解决方案，以防它能帮助遇到类似问题的任何人。

//Forces redraw of element
image.style.opacity = 0.99
setTimeout(() => {
  image.style.opacity = 1
}, 250)

在元素滑入屏幕后立即切换不透明度会强制重绘，并且不透明度开关本身并不明显。丑陋，但有效。

div 仅在 css 转换完成后在 iphone 上呈现（safari）

div only renders after css transform is complete, on iphone (safari)

css

cross-browser