Covalent: _layout.scss attribute selectors slow for IE11/Edge

[michael-lang]

Do you want to request a feature or report a bug?

Bug

Bug Report

I've been using Teradata layouts, but recently during testing of IE realized my site was really slow. Once I found the 192 attribute selectors in the platform sass code, I suspected it was the cause. https://github.com/Teradata/covalent/blob/develop/src/platform/core/common/styles/_layout.scss

Commenting out the inclusion of this file in my build changed the IE performance from miserable up to par with Chrome. The cause is IE's poor handling of attribute selectors. Could you migrate this platform layout file to use another decorator method such as classes instead of attributes?

It doesn't matter if attribute selectors actually apply to any elements on the page. Just the existence of the attribute selectors in the referenced final CSS file affect IE performance.

What is the expected behavior?

IE11 / Edge performance on par with Chrome

What is the motivation / use case for changing the behavior?

Lots of people still use IE or Edge, and blame the website for slowness, not IE.

Which version of Angular and Material, and which browser and OS does this issue affect?

I am using Angular material beta 8.

Thanks.

[ralph089]

I can confirm this issue. Removing the layout.scss increased the performance in IE11 dramatically.

[kyleledbetter]

But layout.scss is needed for... well for the layout :) the performance hit must be due to IE11's partial flexbox support

[emoralesb05]

The thing we are about to do is make every module non platform.scss dependent.. so people would pick and choose which sass files to use (so you can choose not to use the _layout.scss)

[jaa1982]

Same issue here . When I remove _layout.scss , performance increases dramatically...but then the built-in page layouts dont display well (nav-view, nav-list, etc) . I'm assuming all those rely heavily on the Flexbox Layout module and by extension, _layout.scss.

@emoralesb05 , with the upcoming change you mentioned, will the built-in layouts continue to require _layout.scss , or is that one of the dependencies we'll be able to pick and choose?

Similar to the use case in the bug report, I'm wondering if we'll be able to use the built-in layouts ( which are awesome ) with IE11 ( which is... not )

[emoralesb05]

Nope, they wouldnt require the _layout.scss since we would use flexbox directly in each module.

[aciccarello]

This seems similar to angular/material#1771. See angular/material#4282 for their fix.

This is also related to #659 which requests separating out platform.css.

[emoralesb05]

This will be addressed with https://github.com/Teradata/covalent/pull/959, as a way to cherry pick the scss files needed as an alternative