6

ヘッダーテキストを持つアコーディオンタイプのものがあります。開いているときは 1 つのパディングがあり、閉じているときは別のパディングがあります。すべてのパネルは、開いたスタイルから始まり、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 に答える