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);

到h3内部div.title迫使它进行调整。

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

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

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