I have a CodePen here: http://codepen.io/CWSpear/pen/BCriE The idea is the app has a sidebar, and you can click on "Expand" to make the content area full width. If you want to still bring up the sidebar, you can click on "Flyout" to make the sidebar reappear over the content (i.e. maybe you only have the option to flyout in Portrait mode, a lot like the Mail app on the iPad). I did an class toggle approach because it made the JavaScript very simple and everything's done with CSS Transitions. The thing is, even though the header/toolbar of the content area doesn't have a width, and thus should always be the full width of the content area, but when you click on expand, everything else works, except the width of the header doesn't change. This only happens in Webkit. It seems that it calculates what "100%" is, and even though I change the padding of the content (which, because of my box-sizing, makes the content wider), the header remains the same width. It seems to do the opposite on the way back. When I click expand (which would normally probably say collapse now that I think about it) again, it makes the header the full width, but as padding is added to the content, it doesn't readjust the width, and now the header is too wide for the content. Let me illustrate: Before: Click on Expand and you get: Here's what it is expected: It works great in Firefox. It should also be noted that if you resize the window manually, it repaints the area and fixes the header (that's how I actually got the "expected" screenshot). Triggering resize with JavaScript doesn't seem to be work (since I don't think that triggers a repaint). I've tried setting explicit '100%' width and other JavaScript tricks and hacks trying to set a percentage width on the header with no luck. Has anyone else ran into this or have a fix? It was broken in Safari 6.0.1 and Chrome 22.0.1229.79, and worked in Firefox 15.0.1. Like a champ, that Firefox. [Update] It seems to only be related to padding, as ahren was able to fix it by switching to margin. And that works because content's width is auto. If it were 100% width, then it would break it. Demo of that here: http://codepen.io/CWSpear/pen/uvFJh Margin plays nice until I put width: 100% on the element, then it breaks out of the box, even in box-sizing: border-box . For some reason, the actual project I'm working totally collapses the content when I set width: auto , even though it's definitely display: block . I am trying to reproduce that and post a CodePen for that. Is this indeed a Webkit bug? Are there any other alternatives?

Reputation: 3270

CSS Transitions Mess with Percentage Widths on Webkit (Bug?)

I have a CodePen here:

The idea is the app has a sidebar, and you can click on "Expand" to make the content area full width. If you want to still bring up the sidebar, you can click on "Flyout" to make the sidebar reappear over the content (i.e. maybe you only have the option to flyout in Portrait mode, a lot like the Mail app on the iPad).

I did an class toggle approach because it made the JavaScript very simple and everything's done with CSS Transitions.

The thing is, even though the header/toolbar of the content area doesn't have a width, and thus should always be the full width of the content area, but when you click on expand, everything else works, except the width of the header doesn't change.

This only happens in Webkit. It seems that it calculates what "100%" is, and even though I change the padding of the content (which, because of my box-sizing, makes the content wider), the header remains the same width. It seems to do the opposite on the way back. When I click expand (which would normally probably say collapse now that I think about it) again, it makes the header the full width, but as padding is added to the content, it doesn't readjust the width, and now the header is too wide for the content.

Let me illustrate:

Before: From here, you simple click Expand

Click on Expand and you get: Aw, it's broken!

Here's what it is expected: Yay, that's better!

It works great in Firefox. It should also be noted that if you resize the window manually, it repaints the area and fixes the header (that's how I actually got the "expected" screenshot). Triggering resize with JavaScript doesn't seem to be work (since I don't think that triggers a repaint).

I've tried setting explicit '100%' width and other JavaScript tricks and hacks trying to set a percentage width on the header with no luck.

Has anyone else ran into this or have a fix?

It was broken in Safari 6.0.1 and Chrome 22.0.1229.79, and worked in Firefox 15.0.1. Like a champ, that Firefox.

[Update] It seems to only be related to padding, as ahren was able to fix it by switching to margin. And that works because content's width is auto. If it were 100% width, then it would break it.

Demo of that here: http://codepen.io/CWSpear/pen/uvFJh

Margin plays nice until I put width: 100% on the element, then it breaks out of the box, even in box-sizing: border-box.

For some reason, the actual project I'm working totally collapses the content when I set width: auto, even though it's definitely display: block. I am trying to reproduce that and post a CodePen for that.

Is this indeed a Webkit bug? Are there any other alternatives?

Upvotes: 3