5

I have a modal widget that shows in a page, and when I open it in IE11 it is partially broken, but as soon as I resize the window or open Developer Tools, everything gets fixed.

It seems that some of media queries are applied, like some of the rules for very small screen are used in a big one. But it is true not for all elements.

What am I doing wrong?

culebrón
  • 34,265
  • 20
  • 72
  • 110
  • 1
    Have you tried resizing the browser window instead of opening developer tools? Does this happen in other browsers? And can you reproduce this behavior in a JSFiddle example? – TylerH Jan 12 '16 at 06:25
  • will try resizing, then making a simple markup, thanks! – culebrón Jan 12 '16 at 06:30
  • 1
    I had the same initial thought as Tyler. But I suppose, you tested some other browsers and it worked, did it? So it perhaps *is* a IE issue even if it has nothing to do with the DevTools. – Rob Jan 12 '16 at 06:33
  • 1
    @TylerH resizing the window also fixes it. – culebrón Jan 12 '16 at 06:43

4 Answers4

5

Since the issue was with media queries, I searched and found another answer to a similar question. Seemed to be my case: one of the symptoms was that lowest resolution media query was acting.

Answer: https://stackoverflow.com/a/25850649/171278

Solution: the lowest resolution media query should also have min-width, just add min-width: 1px, and it won't be activated on page load.

@media only screen and (min-width:1px) and (max-width:800px)
Community
  • 1
  • 1
culebrón
  • 34,265
  • 20
  • 72
  • 110
  • This fix causes another problem: if the window is 500px for example, we would want the media query to be activated on page load, which it doesn't – Bruce Nov 15 '17 at 06:05
  • I had similar issue but my media query used min-width:768px. adding max-width:4000px didn't help but moving my STYLE tag below the HTML fixed it – el producer Mar 21 '18 at 18:02
4

I encountered a similar issue (media queries weren't processed until the window was resized) and discovered that it went away when I moved the CSS from a dynamically-inserted <style> tag in the <body> to a static <link> in the <head>. (I'm not sure which of these changes actually fixed it, since by the time I discovered this workaround I was thoroughly fed up with the problem and didn't want to look into it any further.)

Wolfgang
  • 3,470
  • 1
  • 20
  • 36
1

We had the same issue media query is not taking for IE, if html also loading dynamically. need to check which html tag have causing this issue by debugging, for us changing the button attr to anchor tag solved the issue.

Prabin Tp
  • 758
  • 6
  • 15
0

There's an issue in IE where it does not apply styles within media queries properly for injected content. Resizing the viewport will cause the styles to be applied.

A permanent solution is to place the styles after the html.

Reference: https://social.msdn.microsoft.com/Forums/ie/en-US/33fd33f7-e857-4f6f-978e-fd486eba7174/how-to-inject-style-into-a-page?forum=iewebdevelopment

Aaron Cicali
  • 1,496
  • 13
  • 24