search

Juicy / juicy-tile-grid

Masonry-like Custom Element for sortable tiles that packs efficiently without changing HTML structure (changes CSS only), and adapts it to CSS Grid Layout. Extended renderer for juicy-tile-list.
http://juicy.github.io/juicy-tile-grid/
MIT License
8 stars 1 forks source link

Invalid css grid styles in IE for dynamic tiles #33

Open miyconst opened 8 years ago

miyconst commented 8 years ago

In the products app on the product details page I have a tile for suppliers, which has dynamic height, because it may have zero to many suppliers. In Chrome it works good, but in IE it lags.

Those screen shots explain the issue:

image

image

cc @tomalec

tomalec commented 8 years ago

Seems to be related to set of our hacks: https://github.com/Juicy/juicy-tile-grid/commit/37e17941b2fbc25bd629baa38c702721637e5337 https://github.com/Juicy/imported-template/issues/17

miyconst commented 8 years ago

Actually, this issue was here before all of those hacks, I just didn't report it by that time, because was not able to fully test the app due to imported-template vs IE fight.

tomalec commented 8 years ago

good to know :) I'll dig into it deeper today

tomalec commented 8 years ago

So another catch is that it's because of the way ShadowDOM is polyfilled and the way we include host styles. In result per each instance of juicy-tile-grid a full set of styles for it is included in global DOM twice. I think we should be able to get rid of "twice", but I'm not sure we will be able to do something about SD polyfill inserting those styles to the LightDOM, as there is no other DOM in IE ;)

tomalec commented 8 years ago

I have reduced the overhead of parsing, shimming, and applying styles for each tile in IE from around 2n to 1, so hopefully it would be a bit less laggy.

There is still a ton of places that may hit the performance, but this one seems to be a good shoot.

@miyconst please check if it works as it should in your use cases

I have also fixed our test suite a little bit, and setup travis for this element https://travis-ci.org/Juicy/juicy-tile-grid but so far we still have few IE tests failing, plus I didn't find a way to enable CSS Grid flags fro Chrome and FF.

miyconst commented 8 years ago

The issue does not seem to be fixed for me.

The beloved IE 11 still produces same styles as shown in the original image.