CSS changes unexpectedly when I open IE Developer Tools
I am currently testing a site on IE8 (running on a Virtual Machine).
The site uses some background images inside :before and :after elements, which are inside a media query:
@media (min-width: 980px) {
.box:after {
...
background: url('../images/assets/home-create-background.png') bottom right no-repeat;
...
}
}
I'm using respond.js to provide support for media queries on IE8. The rules inside the media query are applied as soon as the page loads (ie: respond.js is actually working). However, this images are not displayed.
The funny thing: if I open IE Developer Tools (eg. pressing F12), the images are suddenly displayed.
Anyone has experienced something similar? Do you guys have any idea or direction to explore?
Edit: I was finally able to fix this problem adding content to the :after pseudo-element (I was already applying this rule, but not inside the media query and, for some reason, it wasn't applied on IE)
.box:after {
...
background: url('../images/assets/home-create-background.png') bottom right no-repeat;
content: " ";
...
}
In any case, I believe it's interesting to know why the layout was changing when I opened the Dev Tools...
A couple of pain points with IE can be identified so it is worth checking the following:
console.log() statements will force IE to not render anything until the developer tools are shown.