webkit "haslayout" bug

Question

I have an accordion type thing that has header text. When it is open, it has one padding, and when it is closed, it has another. All of the panels start with their open styles, and then through JS, they are closed. In Chrome and Safari the header text, does not have the closed padding applied.

If I view it in the inspector, the correct (open) padding shows as being applied, and when clicking on the actual element in the inspector, I can see where the padding is supposed to be.

The only way I can get it to apply it or "draw" it (if that's the correct term) is to toggle (or add) any style on that header text, or within that panel.

I have also discovered that when I add padding as an inline style via the inspector, that is also not applied and toggling that does not change it.

It seems like this is very similar to the IE "hasLayout" issues, but I can't find anything referencing a similar error. Does any one have any ideas for further testing or how to fix it?

I cannot seem to replicate this issue in a simpler jsfiddle, and the project I'm working on is massive, so here are the chunks of code giving me issue:

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

So although this doesn't really explain why this happened, adding

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

to the h3 within the div.title forced it to adjust.

Apparently, the padding was being applied correctly, but the h3 wasn't responding to the new size of the parent. Adding this webkit specific style forced it to redraw and recalculate it's width based on the parent's width.

If anyone has thoughts as to why this extra style was required, please add to this!

Based on this answer: Chrome does not redraw <div> after it is hidden