在某些CSS属性发生更改之前,DOM-Elements存在但不可见

Question

我正在为Webapp创建一个复杂的原型(我使用Cordova将它部署到我的iPhone),我遇到了以下问题:

DOM-Elements(不是使用JavaScript创建,而是在静态HTML文件中直接创建)存在(它们在检查器中以正确的大小显示)但不可见.有时它们根本没有被显示,有时它们被部分显示,有时它们的一部分被显示在不同的位置.检查员总是在正确的位置显示他们的"身体".

有一个奇怪的解决方案:只要在加载一侧后更改CSS属性(例如取消选中并检查检查器中任何元素的任何属性 - 有时以编程方式更改属性也有效),它们就会正确显示.问题出现在Safari和Chrome中,但不是在Firefox中(可能是Webkit问题？).这在Safari Mobile中是最糟糕的(我需要它才能最有效).

首先使用transform: translate3d(0);hack帮助,但现在不再使用了 - 我正在使用和动画大量的Flexbox元素.我只是在浏览器中要求很多？

编辑:问题似乎只有在我在一个容器中滚动后才会发生.滚动后某些(完全不相关)元素消失.

Answer 1

对您的动画元素尝试以下方法之一。

transform: translatez(0)

或者

backface-visibility: hidden;

或者

will-change: transform;