Ошибка "haslayout" в webkit

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 не отвечал на новый размер родителя. Добавление этого специфического стиля веб-набора заставило его перерисовать и пересчитать его ширину на основе ширины родителя.

Если у кого-то есть мысли о том, почему этот дополнительный стиль был необходим, пожалуйста, добавьте к этому!

Основываясь на этом ответе: Chrome не перерисовывает

после его скрытия

1

Источник Поделиться

user738394 30 ноя '12 в 15:38 2012-11-30 15:38

2012-11-30 15:38