css - webkit "haslayout"漏洞

Question

我有一个带有标题文本的 Accordion 类型的东西。当它打开时，它有一个填充，当它关闭时，它有另一个。所有的面板都以它们的打开样式开始，然后通过 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