Question

Background:

I am trying to transition smoothly between various presentations of my website using media-queries and CSS3 transitions. So far everything appears to be hunky dory, however, I’ve hit a snag while transitioning between a presentation that contains a vertical scroll-bar and one that doesn’t. I think it’s pretty common to change website widths with media-queries, so I was surprised when nothing came up on Stack about this.

The problem

Webkit browsers appear to enter an infinite loop / flicker when the transition results in a change to the presence or absence of the vertical scroll-bar. Here is a demo of the behavior.. to trigger it, just re-size the window slowly around the 700px wide mark in Chrome or Safari PC.

Question / what I’ve tried

I’m wondering what the workaround here is for Webkit? Firefox has no problem with it. I’ve tried removing the easing and transitioning faster (not preferred). I realize that I can simply remove the vertical transitions and simply transition the width, however, it is important to my design to transition both height and width.

Answer 1

I think the easiest solution would be to force the scroll bar to always be present. The simplest way to do that is by using this little snippet:

html {
    overflow-y: scroll; 
}

Here is your example with the above snippet added: http://jsfiddle.net/joshnh/8XW4v/show

I’m not sure if it is a webkit bug, because if you think about it, it is expected behaviour (it’s just weird, and Firefox have done a smart thing in making sure it doesn’t happen). Basically, when the media query kicks in, the element shrinks, and the parent no longer needs a scroll bar. The problem with this is as soon as the scroll bar disappears, the media query is no longer relevant due to the extra few pixels that are now available. So the object grows again, the parent brings back the scroll bar, kicking in the media query again, and so on…