Chrome 最初隐藏时不呈现文本

Question

我的目标是制作一个简单的Load More 按钮。我有我的container div，它总共包含 20 个组件，我只想一次显示和加载 5 个。我首先使container 的高度等于带有overflow: hidden 的5 个组件的高度，以防止其余组件显示。一旦按下Load More 按钮，container 的高度就会更改为十个组件的高度，从而显示 10 个组件；然后改成15个组件的高度等等。

这在 Firefox 和 Safari 中运行良好，但是当我尝试在 Chrome 中加载更多内容时，某些文本将无法呈现。在检查员检查时，可以清楚地看到文本实际上在那里，只是没有呈现。

什么时候应该是这样的：

这可以通过关注给定组件来解决（例如，突出显示隐藏的文本或将鼠标悬停在组件内的按钮上）。然而，让用户专注于一个组件以查看它所说的内容并不是一个好的做法。

我尝试隐藏所有组件，当按下Load More 按钮时，使刚刚加载的组件不隐藏，但无济于事。我还尝试将每个组件的 innerHTML 设置为自身，但也没有用。

Answer 1

最终可行的解决方案是设置 container 的特定样式

.component {-webkit-transform: scale3d(1, 1, 1);}

我不知道为什么会这样，所以如果有人知道为什么会这样，请在下面评论。