DOM 元素存在但不可见，直到某些 CSS 属性被更改答案

【问题标题】：DOM-Elements are there but not visible, until some CSS property is changedDOM 元素存在但不可见，直到某些 CSS 属性被更改
【发布时间】：2015-09-10 16:12:37
【问题描述】：

我正在为一个 Web 应用程序创建一个复杂的原型（我正在使用 Cordova 将它部署到我的 iPhone），我遇到了以下问题：

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

有一个奇怪的解决方案：加载侧面后一旦更改了 CSS 属性（例如，在检查器中取消选中和检查任何元素的任何属性 - 有时以编程方式更改属性也可以），它们就会正确显示。该问题在 Safari 和 Chrome 中都出现，但在 Firefox 中没有（可能是 Webkit 问题？）。它在 Safari Mobile 中最糟糕（这是我最需要它来工作的）。

使用transform: translate3d(0); hack 一开始有帮助，但现在没有用了——我正在使用很多 Flexbox 元素并为其制作动画。我只是对浏览器要求太多？

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

【问题讨论】：

见：How to create a Minimal, Complete, and Verifiable example。
我已经尝试创建一个示例，但是很难重新创建。特别是因为它只有在达到一定程度的复杂性时才会发生。我不确定我的代码的哪一部分是造成问题的原因，我认为将其完全发布在这里不会有任何帮助。稍后我将尝试再次创建一个示例，但我不确定我是否能够做到这一点。
我无法确定为什么这种情况不断发生。我已经删除了所有的 Flexbox 代码，没有用。我已经用 iScroll-Library 替换了-webkit-overflow-scrolling: touch; ，因为每当我滚动它时它就坏了，它工作了一段时间，但现在又发生了。我认为这是因为元素太多（没有那么多......），但即使我使用 jQuery 仅在它们可见时加载它们并在它们不可见时清空 div 仍然会发生。

标签： html webkit mobile-safari flexbox mobile-webkit

【解决方案1】：

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

transform: translatez(0)

或

backface-visibility: hidden;

或

will-change: transform;

【讨论】：

背面可见性：隐藏；为我工作。大概和 3d 硬件加速有关。

【解决方案2】：

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

【讨论】：

您的回答让我们走上了正确的道路，但实际上是嵌套弹性框导致了问题。