[metal-dom] Styles are not loaded in order in IE11

[antonio-ortega]

When using globalEvalStyles.runStylesInElement to load several CSS files and inline styles in IE11 they are not loaded in order. If you are loading a very large CSS file, and just after that some inline styles, these ones would be overriden. This is happening only in IE11.

This is happening only for styles and not for scripts, because in scripts we load them orderly, where next file is called from previous file's callback.

While for styles they are loaded inside a for loop without waiting till previous styles are completed loaded, as you can see here.

In order to find a solution, I tried a similar code in globEvalStyles but 'load' event was not being fired by IE11 for link elements, so the callback to load next styles' file was not loaded.

Thanks,

[jbalsas]

Hey @diegonvs, @matuzalemsteles, could you guys take a look here?

[matuzalemsteles]

I'll take a look at this with @diegonvs this afternoon.

[diegonvs]

Just for information: As filled internally, there is a problem on Senna. A fix need be applied into Senna.

[yuchi]

/cc @GianBe

[jbalsas]

Just for additional reference, this is looking more and more as an IE11 issue.

Running this snippet of code in a navigated page in IE11 will show different document.styleSheets ordering:

s = document.createElement('style');
s.type = 'text/css';
s.textContent = '#footer { background-color: pink; }';
document.head.appendChild(s);

for(var i=0; i<document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    var cssText = styleSheet.owningElement.href; 

    if (!cssText) {
        cssText = styleSheet.cssText;
    }
    
    console.log(i, cssText);
}

var docElem = document.documentElement;
var docElemNext = docElem.nextSibling;

document.removeChild(docElem); // this will clear document.styleSheets
document.insertBefore(docElem, docElemNext);

for(var i=0; i<document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    var cssText = styleSheet.owningElement.href; 

    if (!cssText) {
        cssText = styleSheet.cssText;
    }
    
    console.log(i, cssText);
}

It looks like IE11 does not correctly recompute css precedence under some conditions, independently on wether the resources are added in the right order and with proper timing.

[duracell80]

Wouldn't this also cause issues for css placed in style tags in content fragments in DXP 7.2? If I'm following correctly IE is applying mobile device breakpoints to a desktop page?

That's kinda a big deal, that would lead to display corruption.

I've been seeing these kinds of display issues when navigating pages in IE. I hate IE too, but it's still the dominate browser in enterprise. Just turn senna off for IE.