Chrome最初处于隐藏状态时不会呈现文本

Question

我的目标是制作一个简单的Load More按钮。我的container div总共包含20个组件，我只想一次显示并加载5个组件。我首先使用container使overflow: hidden的高度等于5个组件的高度，以防止其余组件显示。按下Load More按钮后，container的高度将更改为十个组件的高度，从而显示十个组件；然后将其更改为15个组件的高度，依此类推。

这在Firefox和Safari中非常有效，但是当我尝试在Chrome中加载更多内容时，某些文本将无法呈现。通过检查员的检查，很明显可以看到文本实际上在那里，只是没有呈现出来。

何时应如下所示：

这可以通过关注给定的组件来解决（例如突出显示隐藏的文本或将鼠标悬停在组件内的按钮上）。但是，让用户专注于组件以查看其含义并不是一个好习惯。

我尝试将所有组件都隐藏起来，并按下Load More按钮时，使那些刚加载的组件没有隐藏，这无济于事。我还尝试将每个组件的innerHTML设置为其自身，这也行不通。

Answer 1

最终有效的解决方案是设置container

的特定样式

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

我不知道为什么会这样，如果有人对它为什么起作用有答案，请在下面评论。