Html DOM元素存在但不可见，直到某些CSS属性发生更改

我正在为一个Webapp创建一个复杂的原型（我正在使用Cordova将其部署到我的iPhone上），我遇到了以下问题：

DOM元素（不是使用JavaScript创建的，而是在静态HTML文件中）在那里（它们在inspector中以正确的大小显示），但不可见。有时它们根本不显示，有时部分显示，有时部分显示在不同的位置。检查员总是在正确的位置显示他们的“身体”

有一个奇怪的解决方案：在加载端之后，只要CSS属性发生更改（例如，在inspector中取消选中并检查任何元素的任何属性–有时以编程方式更改属性也有效），它们就会正确显示。这个问题在Safari和Chrome中都存在，但在Firefox中却没有（可能是Webkit问题？）。这在Safari Mobile中是最糟糕的（我最需要它来工作）

使用

转换：translate3d（0）

hack一开始很有帮助，但现在没有了——我正在使用很多Flexbox元素并制作动画。我是一个简单的要求多从浏览器

---

编辑：问题似乎只有在我在一个容器中滚动后才会出现。在我滚动某些（完全不相关的）元素后，这些元素将消失。

请尝试对动画元素执行以下操作之一

transform: translatez(0)

或

或

---

如果这破坏了其他人的生命，请尝试检查是否正在按钮元素上设置

display:flex

。我猜你不应该这么做，尽管其他操作系统和浏览器似乎都可以接受。

请参见：。我已经尝试创建了一个示例，但很难重新创建。特别是因为它只有在达到一定程度的复杂性时才会发生。我不确定我的代码的哪一部分导致了这个问题，我认为在这里发布它不会有任何帮助。稍后我会再次尝试创建一个示例，但我不确定我是否能够做到这一点。我无法确定为什么会发生这种情况。我已经删除了所有Flexbox代码，但不起作用。我已经替换了

-webkit溢出滚动：touch使用iScroll库，因为每当我滚动它时，它就坏了，它工作了一段时间，但现在又发生了。我认为这是因为元素太多（没有那么多…），但即使我使用jQuery只在元素可见时加载它们，而在元素不可见时清空div，这种情况仍然会发生；为我工作。这可能与3d硬件加速有关。你的回答让我们走上了正确的道路，但实际上是嵌套的FlexBox导致了这个问题。
backface-visibility: hidden;

will-change: transform;