Vanilla-lazyload: lazy-loading class not removed on Safari

[paperplanefactory]

Hello Andrea,
I'm facing this issue only on Safari.
After page load is complete the class "lazy-loading" is not replaced by class "lazy-loaded".

To Reproduce
Steps to reproduce the behavior:
You can - if you can use Safari obviously :) - check the problem on this page:
https://www.10rivers1ocean.com/it/2019/08/giornata-record-per-la-plastica/
and scroll to images after text.

LazyLoad version
Please report which version of LazyLoad you're using.

• Version 12.0.0

Desktop (please complete the following information):

• Browser [safari]
• Version [e.g. 12.1.2]

Thanks for your great work!

[verlok]

Hey @paperplanefactory,
Thank you for opening this.
Are you referring to iOS Safari, Mac OS Safari or both?

[paperplanefactory]

Sorry, I forgot to tell you. This specific problem happnes on Mac OS. I've seen the same thing happening on iOS Safari but i thought it was due to phone's issue in rendering the effect of "lazy-loading" so I simply removed it from CSS rules.

[viiiprock]

I have the same issue on iOS and Safari on MacOS as well, in my modal and load more images which has lazyload.update(), the src is updated but loaded class is not replace the loading, my temporary solution is to manually remove & update class name

[TheGitPanda]

Also happening on the latest production Chrome.

A temporary fix which has solved this issue for me:

const lzyLoad = new LazyLoad({
    callback_reveal: (el) => {
     if ( el.complete && el.naturalWidth !== 0 ) {
         el.classList.remove('loading')
     }
  }
})

[verlok]

Hi all,

@paperplanefactory I was able to reproduce the issue on your website on Safari 13.0.1, but I think the problem is determined by another script on your page. In fact with the very same version of Safari, everything works fine in the demo page.

@TheGitPanda today the "verylatestversion" of Chrome is 77.0.3865.90 and I wasn't able to reproduce the but on @paperplanefactory's website. Would you please open another issue so we can dig into that? Thanks

[paperplanefactory]

Thank you Andrea, as you said the issue depends on combining lazy load with a library for animations on scroll (in my case AOS - Animate on scroll library).
I've foud a workaround using the snippeto provided by @TheGitPanda and it works.

[verlok]

Good, I'm glad it worked!
Closing the issue now. If you still need help, feel free to reopen.

[mheiduk]

I think this isn't related to any third-party script. I can reproduce this issue in this jsfiddle: https://jsfiddle.net/c2jw6g17/

It only occurs when src and data-src are the same images. You can change the param q=60 to 70 and run it again, then it just works fine. In other browsers, src gets replaced with data-src anyway, so the loaded class is properly added.

It might be odd to put the same image in src and data-src, but in my case this happens sometimes, when a lower resolution src image is not available.

Thanks!

Best,
Marc

[somebody32]

Can confirm that I have the same problem and only on Safari