6

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

1 回答 1

1

因此，尽管这并不能真正解释为什么会发生这种情况，但添加

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

到h3里面div.title强迫它去调整。

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

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

基于这个答案：Chrome 隐藏后不会重绘 <div>

于 2012-11-30T15:38:25.770 回答