search

mlisook / plastic-image

A Polymer 3.0 element which adds extra plasticity to <iron-image> with support for srcset and lazy loading
MIT License
30 stars 6 forks source link

Lazy-load not working in Samsung browser #10

Closed bramvanderholst closed 7 years ago

bramvanderholst commented 7 years ago

Hi,

Sadly lazy-load doesn't seem to work on Samsung browsers (V 5.4.00-75). Even in light-dom as opposed to the earlier (fixed) Safari issue. (The demo page on https://www.webcomponents.org/element/mlisook/plastic-image isn't working either)

It doesn't seem to be a polyfill issue as it appears the browser natively supports IntersectionObserver.

mlisook commented 7 years ago

I could use some help on this ... I'm traveling in a rural area with limited and slow internet connectivity and haven't been able to download the Samsung browser or connect to Samsung's testing lab.

I suspect Samsung, which updates their browser much less frequently than Google, is using an older version of Chromium which had IntersectionObserver, but did not include the isIntersecting property in events.

Would you mind testing to see if changing _lazyLoadCallback(e) to test for intersectionRatio as an fall back for isIntersecting would address the problem? Something like:

_lazyLoadCallback(e) {
      // if (e.isIntersecting && this._lazyLoadPending) {
      if ((e.isIntersecting || e.intersectionRatio > 0) && this._lazyLoadPending) {
          this._lazyLoadPending = false;
      }
}
mlisook commented 7 years ago

I've confirmed my suspicion from the last post - Samsung Internet is built on Chromium 51 and at that time did not include the isIntersecting property (screen shot - Chrome remote debug attached to Pixel running Samsung Internet on plastic-image demo page):

pimg-samsung

Note there is no isIntersecting property.

I'll make the change proposed above sometime today.

mlisook commented 7 years ago

New version 1.0.3