Media Queries min-width not firing correctly in Opera, FF and IE

Question

I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this:

@media all and (min-width: 660px) {
    ... styles for box decoration ...
}

and use this meta viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct.

Problem is with Opera, IE and Firefox. The styles apply as soons as width hits about 642px :( I observe these browsers firing min-width sooner at more content even in max-width condition and even on another website (built by me).

Where could be the problem?

Thanks a lot!

Is the difference basically the width of a vertical scrollbar? — Boris Zbarsky, Apr 08 '12 at 23:12

score 6 · Accepted Answer · edited Aug 01 '12 at 11:34

6

Problem in width of scrollbar in BODY or HTML - it about 16-18px.

What to do?

Bad solution - set to BODY or HTML overflow-y: scroll.
Experimental solution - try to move scrollbar from BODY or HTML to first wrapper DIV.

Like so:

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

edited Aug 01 '12 at 11:34

answered Apr 10 '12 at 15:23

Rustam

1,875
2
16
33

Thanks, I didn't know it was because of the scrollbar. The 1st solution doesn't work and the 2nd words in all modern browsers, but doesn't much in IE7, where all relatiely, absolutely (and maybe even normally) positioned elements keep their position fixed on screen. – koubic Apr 15 '12 at 22:35
Anyway according to [this article](http://www.456bereastreet.com/archive/201101/media_queries_viewport_width_scrollbars_and_webkit_browsers/), Webkit based browsers don't follow **W3C specification** which says viewport is measured **including scrollbar**. And given the fact that Webkit browsers rule the mobile web, we may see this behavior consolidating between Webkit and W3 + minor browsers. Anyway it's really annoying, I'm frustrated :( – koubic Apr 15 '12 at 22:47
2

btw it's enought to change CSS of just html and body: `html{overflow:hidden;height:100%;} body {overflow:auto;height:100%}` – koubic Apr 15 '12 at 22:55
Thanks man! saved me a lot of hours of headache... I owe you a bag of coffee! – amypellegrini Nov 12 '12 at 15:36
This solution is great but unfortunately **it may change the default behavior** of some well known jQuery plugins. – zitix May 15 '13 at 19:09

Andreas Riedmüller · Answer 2 · 2012-05-07T08:36:45.643

1

I just had the same Problem and found a solution, at least for me. I didn't test it a lot, so please let me know if there is something I didn't consider.

In the media query I set min-width of the body to the min-width of the media-query. It works!

@media only screen
and (min-width : 1060px) {
    body{
        min-width: 1060px;
    }
    #main-content{
        text-align: right;
        padding-left: 0;
    }
}

I made an example for this problem and solution here:

http://gehirnstroem.at/media-query.htm

http://gehirnstroem.at/media-query-solved.htm

edited May 07 '12 at 08:36

answered May 04 '12 at 15:25

Andreas Riedmüller

1,217
13
17

Thanks! I'll test it next time. For now, I set the media queries widths safely enough for all browsers. – koubic May 07 '12 at 20:37

Media Queries min-width not firing correctly in Opera, FF and IE

2 Answers2

Linked