search

anselmh / object-fit

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

Rewrite / Replace CSS parser with proper solution #19

Closed anselmh closed 9 years ago

anselmh commented 9 years ago

I at least found some information what causes the trouble and makes Firefox slow and unresponsive when dealing with multiple images here. It’s the selector matching and generally getting the computedStyles from the elements and re-applying them.

François Remy (@FremyCompany) wrote his own parser based on Tab Atkins’. Probably this will perform better and with less errors than the currently used one.

Sources

Hopefully I’m able to test this out in the next weeks. I’ve started a branch here, so if you want to try helping out, please use this branch as base.

It might also solve the CORS/CSP issue we’re currently facing. cc @ketri.

Bountysource

petripottonen commented 9 years ago

Looks good man!

anselmh commented 9 years ago

Won’t do this. All solutions that reimplement the CSSOM are massively bloated and it’s not worth pulling in 50 additional kb of code for a simple one property polyfill. Therefore closing this for the time being. I might be able to come up with whole different solution.

FremyCompany commented 9 years ago

FWIW, I think the optimal solution is to run most of the CSSOM stuff on the CSS as part of the grunt process (or via node.js), and generate a companion js file for each css, and add only a very small client-side library (querySelectorLive / polyfillStyleInterface / ...) to handle the dynamic behavior.

I would be glad to work on this, but I ran out of time and motivation. If you feel like it would solve your use case, we could probably team up to work on this. If you had something else in mind, I'm curious about what do you plan to do.

anselmh commented 9 years ago

Hm, thanks for the input, @FremyCompany. Currently I’m on a very tight schedule so I can’t put a lot of effort in here over the next weeks. It would be great indeed if we could use the base for polyfills and only get a fraction and small part of the whole code in production. I’m not yet sure it would solve my use case but the performance issues in this polyfill currently are based on parsing the whole CSS through getmatchedrules etc.

FremyCompany commented 9 years ago

Okay, I'll try to schedule this at some point. It's not really I need help, it's more like I need some motivation to prioritize this over other stuff ^_^ I think I agree with you the solution I have now is more for dev than for production.

Btw, you didn't reply: what's the solution you plan to use now? Do you already know?

anselmh commented 9 years ago

Ah sorry. No I don’t have a real plan what I’ll use. I might try out to provide the object-fit behavior through SVG but I haven’t tested this though don’t know if that works. And it would be for SVG supporting browsers only then.