search

anselmh / object-fit

Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.
MIT License
996 stars 92 forks source link

Can you use multiple css selectors? #33

Closed sonicpunk closed 9 years ago

sonicpunk commented 9 years ago

On my project watching all image tags just crashes IE. Is it possible to add multiple css selectors?

anselmh commented 9 years ago

Hey, the polyfill accepts all options of querySelectorAll() which means you can also chain CSS selectors in it, comma-separated.

Please be aware that the polyfill still needs to travel up the whole DOM to match parent styles on it as well which is a performance issue but lets it act properly. It might be the case that when you have a large CSS file and use this polyfill, IE might still crash, even when you limit the selectors.

anselmh commented 9 years ago

Oh by the way, can you add your setup (IE version, MS version) and the size of your CSS just for the record, please?

sonicpunk commented 9 years ago

Thanks for getting back to me. Our minified CSS is 201 KB, tested on Windows 8, IE11. Even with using the selectors, the performance is a no good.

anselmh commented 9 years ago

Yes, I assumed this already. 200kb of CSS is very heavy and it definitely is the reason that the browser hangs during the polyfills’ execution. Maybe you could go with SVG wrapper using the preserveAspectRatio trick which is at least similar to the object-fit behavior? The polyfill won’t ever solve this performance problem as in that case it would lack much of the original behavior – making it useless as a "polyfill".