Magento 2 styling / CSS not displaying in IE 9

Question

For some reason any Less I have written inside the @media-common = true media query does not load in IE9. I can't find any specific code to prevent this from rendering out in IE9.

It happens whether it's client-side Less compilation or deployed to a server in production mode with server side compilation.

I've tried clearing the usual directories, clearing caches, running the deploy static content command.

All the CSS updates and loads in IE9 minus any styling within the & when (@media-common = true) {} mixin.

Example

For example ther following code should render the background to be green as it has important, this works as expected in every browser and device except IE9.When I load the website in IE 9 the background is blue.

//
//  Common
//  _____________________________________________
& when (@media-common = true) {
    body {
        background-color: green !important;
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    body {
        background-color: red;
    }
}

//
//  Tablet and above
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    body {
        background-color: blue;
    }
}

Question

Why is IE9 ignoring any code inside & when (@media-common = true) {}?

Answer 1

Magento 2 no longer supports IE9 so this is unlikely to ever be fixed by Magento

It's looking very likely that this is down to the fact IE9 can only support up to 4096 selectors, my styles-m.css currently has 4977 selectors (due to having Luma as a parent (bad idea!)).

The styles inside the media-common mixin aren't displaying as they are placed last, after the 4096 limit.

It seems my only solution is to split the CSS up into multiple files, this should be fun!

Update: - This was indeed down to the 4096 selector limit, adding my own CSS files instead of using styles-l.css and styles-m.css resolved it although it was a huge pain.

Answer 2

Try changing the order of your styles so that you do not need to add !important. If you move

& when (@media-common = true) { body { background-color: green; } }

to be the last item instead of the first, the nature of cascading stylesheets means this will cascade down and use the last style specified that is relevant.