Search code examples
cssgoogle-chromecss-floatmedia-queries

Google Chrome, float, and media queries

I'm having a problem where Google Chrome sometimes incorrectly renders a floated element. More specifically, the markup looks like this:

<h1>
    Headline
    <small>Sub-heading</small>
</h1>

This is styled using this simple CSS:

h1 small {
    display: block;
}

@media (min-width: 750px) {
    h1 small {
        float: right;
    }
}

(here is a link to a jsfiddle.com which demonstrates the problem in action: http://jsfiddle.net/ys6L88r8/1/)

As you can see, the element is floated within a media query. When loading the page, if the browser window width exceeds the width specified in the media query, everything looks fine. However, if you resize the browser below this point and then back up again, the element incorrectly appears below the h1.

Is this a Google Chrome bug? I have verified that it works correctly in Firefox and Safari 8. I'm using Google Chrome 40.0.2214.91 (64-bit) for OS X.

Solution

  • This behavior is a verified bug in Google Chrome: https://code.google.com/p/chromium/issues/detail?id=411256