CSS changes unexpectedly when I open IE Developer Tools

Question

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...

Answer 1

A couple of pain points with IE can be identified so it is worth checking the following:

1. Any console.log() statements will force IE to not render anything until the developer tools are shown.
2. When you open up IE Dev tools, it is in a different compatibility mode by default than the default view that you are used to.