search

tvler / lazy-progressive-enhancement

A lazy image loader designed to enforce progressive enhancement and valid HTML.
http://tylerdeitz.co/lazy-progressive-enhancement/
MIT License
190 stars 10 forks source link

Load of responsive image fails in Safari when using scroll: false #10

Closed raglannyc closed 8 years ago

raglannyc commented 8 years ago

In Safari, when scroll is set to false, lazy loaded responsive images have a height of 0 and as such do not display. I set up a minimal example here: http://raglan.nyc/lazyload/

The dog image uses srcset, the cat is a plain ol' img.

Is there some difference in the way lazy loading is being done on scroll versus simply when the function is called?

tvler commented 8 years ago

Hmm, the examples on the project's website seem to be working without the scroll option set: http://tylerdeitz.co/lazy-progressive-enhancement/ (every image besides the bottom ones)

I'm at work right now but I'll check out your example real quick! If I find a bug I'll get to it soon 👍

raglannyc commented 8 years ago

The only images I see on that page are the bottom ones :)

I'm in El Capitan 10.11.6 and Safari 10.0.

tvler commented 8 years ago

He he, the code to load the images runs after pressing the corresponding "Run" buttons. Is that working for you?

raglannyc commented 8 years ago

ahh oops, yeah those load for me after pressing "Run", but none of those are responsive images!

tvler commented 8 years ago

Ok, I'm able to recreate this bug & will check it out sometime tonight probably. I haven't looked too deeply into it but I'm feeling like the viewport parameters to load a responsive image aren't being set properly. Thanks a ton for reporting 😄

raglannyc commented 8 years ago

awesome, let me know if I can help

tvler commented 8 years ago

This has been fixed in https://github.com/tvler/lazy-progressive-enhancement/commit/95b32618af8d37c2ab75e9b955e01965421f6e33 !!

I'm now calling document.importNode before appendChild, as specified by https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

If you want to append node from a different document the document.importNode() method must be used.