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 hidden

webkit“haslayout”错误

1 个答案: