search

cee-chen / object-fit-polyfill

A Javascript polyfill for browsers that don't support the object-fit CSS property.
ISC License
496 stars 93 forks source link

Fix invisible image #26

Open MasGaNo opened 7 years ago

MasGaNo commented 7 years ago

Hi!

I create this new PR because, I see that for pictures that are not displayed in the DOMTree, the polyfill doesn't work correctly and so when I display for the first time the picture, it's not correctly configured until I resize the screen.

Feel free to improve this part, I think we can do it better.

Thank you.

cee-chen commented 7 years ago

Hey hey! Quick question - what's the specific use-case for non-visible elements? I can think of 2 off the top of my head (lazy-loading and carousels) - but I'm not totally convinced that the polyfill should be opinionated enough to handle those cases out of the box.

Rather than the polyfill listening for or polling for a visibility change (which can get extremely expensive, esp. in the case of lazy-loading galleries for example), I would rather see the responsbility of polyfilling images that change visibility be on the developer rather than on the polyfill.

See https://github.com/constancecchen/object-fit-polyfill/issues/21#issuecomment-293693668 for what I think is a much more performant solution - image libs that affect visibility should fire events (most carousel libs do every time a slide changes, for example), and devs should hook onto those events for polyfilling.

52eins commented 5 years ago

Fix for img element in picture element:

picture { width : 100%; height : 100%; display: flex; }