IE9 Media Queries Responding at Wrong Beakpoint

[dcp3450]

I’m using the skeleton frame work for my grid (a frame work I’ve used many times). Every browser works expected except for IE9.

Each breakpoint seems to respond around 20px or so after it should. For example my 959/768 breakpoint doesn’t respond till around 941px. Between 960 and 941 I get a horizontal scroll bar. If I change the width of the column “container-twelve” (via inspector) to 940 the scroll bar goes away. The problem is, doing this completely destroys the layout of the rest of the page.

I’ve checked for padding and margins (removed them all) and that doesn’t seem to be an issue. The only thing that seems to fix it is the width. But that doesn’t explain why IE9 is ignoring the media query call until it’s well within range.

Has anyone see this issue or dealt with it before?

Because of the insanity of the code I’ve been “handed” I can’t post anything (css alone is 4000 lines). I also can’t post a link as the site is inside a VPN.

I know not posting code or links isn’t very useful but any help or a push in any direction would be great as I’m at a loss.

[Paulie_D]

Is IE9 including the scroll bar in the page-width?

For IE, I usually mandate a scroll bar is visible whether or not it is actually required.

[dcp3450]

The scroll bar only shows up in between the media query break point. All the other browsers handing it correctly. What’s odd is the media query “works” it’s just delayed by about 20px in IE9.

[Paulie_D]

Oh..wait it’s a horizontal scrollbar.

That will be an element or image that hasn’t re-sized properly..or just possibly a margin/padding issue.

Without a link it’s going to he bard to help.

[dcp3450]

On the first breakpoint when I get the horz. bar
if I change “columns-twelve” from 960 to 940 it fixes it. I’ve moved all of its and it’s children’s padding and margins just to be sure and it doesn’t change anything.

[NghiQuach]

im having the same issue but my delay is a bit larger like in the 100px range. It does it on all browsers for me and I’m using the bootstrap framework.

I do think it has something to do with images/elements not re-sizing properly because one of the pages that I built from scratch responds at the exact breakpoint. In another instance in which I had to implement responsiveness on an existing page they wanted me to keep most of the markup. Now my breakpoints are really delayed but I can’t really spot the error.

EDIT:
So I was trying to pinpoint the problem from mine I basically made a simple program that had one row span and I set a background color. Then at a certain media query I change that color. I put this page on my webserver and it works at the specific media query. When i put it on my local machine and run it is delayed around 100 px. Any ideas anyone?

[Author]

Posts