webkit“haslayout”错误

Question

我有一个带有标题文本的手风琴类型的东西。当它打开时，它有一个填充，当它关闭时，它有另一个。所有的面板都以它们的开放样式开始，然后通过 JS 将它们关闭。在 Chrome 和 Safari 中，标题文本没有应用封闭的填充。

如果我在检查器中查看它，正确的（打开的）填充显示为正在应用，并且当单击检查器中的实际元素时，我可以看到填充的位置应该 .

我可以让它应用或“绘制”它（如果这是正确的术语）的唯一方法是在该标题文本上或在该面板中切换（或添加）任何样式.

我还发现，当我通过检查器将填充添加为内联样式时，它也不会被应用并且切换不会改变它。

这似乎与 IE 的“hasLayout”问题非常相似，但我找不到任何引用类似错误的内容。有没有人对进一步测试或如何解决有任何想法？

我似乎无法在更简单的 jsfiddle 中复制这个问题，而且我正在从事的项目非常庞大，所以这里是给我问题的代码块：

CSS

@media only screen and (min-width: 600px) and (max-width: 767px) {
    .checkout-plans .collapsible .title {
        padding-right: 130px;
    }
    .checkout-plans .collapsible.closed .title {
        padding-right: 323px;
    }
}

HTML

<div class="module checkout-plans">
    <div class="collapsible active">
        <header>
            <div class="title">
                <h3>This text has the correct padding applied</h3>
            </div>
        </header>
    </div>
    <div class="collapsible closed">
        <header>
            <div class="title">
                <h3>This text does not have the correct padding after having the "closed" class applied via JS</h3>
            </div>
        </header>
    </div>
</div>

Answer 1

虽然这并不能真正解释 为什么会发生这种情况，但添加

-webkit-transform: scale3d(1,1,1);

到div.title内的h3强制它调整。

显然，填充已正确应用，但 h3 没有响应父级的新大小。添加此 webkit 特定样式会强制它重绘并根据父级的宽度重新计算其宽度。

如果有人对为什么需要这种额外的样式有任何想法，请添加到此！

基于这个答案：Chrome does not redraw <div> after it is hidden