DOM-Elements存在但不可见，直到某些CSS属性被更改

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;

Answer 2

如果这会毁掉其他人的生活，请尝试检查您是否在按钮元素上设置了 display: flex。我想您不应该这样做，尽管其他所有操作系统和浏览器似乎都可以接受。