css - 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

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

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

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