div 仅在 iPhone (Safari) 上的 CSS 转换完成后渲染

Question

在iPhone Safari浏览器上，包含文本的div元素在滑动到屏幕上时不会呈现。但是，删除div 中的文本，它可以工作！

Bug 发生在 iPhone 5 上，所以 IOS Safari 10。(我测试了野生动物园 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)

在

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