Question

在iphone safari浏览器中，包含文本的div元素在滑动到屏幕时不会被渲染。但是，删除div中的文本，它可以工作！

在iPhone 5上发生错误，所以IOS Safari 10.（我测试了safari 11并且它正常工作）

这是一个可以更好地解释的jsFiddle。 https://jsfiddle.net/pip36/wtkodwr6/

＆＃13;

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)';
}

＆＃13;

.container {
  perspective: 300px;
}

.parent {
  transform-style: preserve-3d;
}

.block {
  width: 200px;
  height: 200px;
  background: red;
  transition: transform 1s;
}

button {
  width: 200px;
  height: 50px;
}

＆＃13;

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

＆＃13;

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

Answer 1

我不确定是否有人会复制此问题，但我会发布我的解决方案以防其他人遇到类似问题。

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

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

div只在css转换完成后渲染，在iphone（safari）

1 个答案: