native loading plugin not working for initial images in Safari 14

[florianbrinkmann]

Describe the bug Images that are in or near the viewport on page load are not displayed in Safari 14 on macOS 10.15.6 when the native loading plugin is used. Images that are further down the page load correctly when they come near the viewport.

To Reproduce https://codepen.io/florianbrinkmann/pen/VwYomRL

In what environment (browser/device etc.) does this bug happen/not happen: Safari 14 on macOS 10.15.6

[DaveEshopGuide]

@florianbrinkmann As a workaround triggering the window resize Event seems to work. window.dispatchEvent(new Event('resize')); Cheers ✌

[aFarkas]

I just tested it with Version 14.0 (15610.1.28.1.9, 15610) and I can not reproduce it. The plugin shouldn't have an impact. Maybe you have an extension or a specific setting changed?

[florianbrinkmann]

Thanks for checking it out!

The user of my WP plugin who reported the issue (this is the site where he noticed the problem: https://www.adac-suedbayern.de) is not aware of extensions or changed settings that could cause that. The Safari version he uses is the same like yours, do you also use macOS 10.15.6?

And thanks for your workaround @DaveEshopGuide, he gave it a try but it did not do the trick.

[chrfs]

+1 We are having the same issue and did not change the configuration.

[domihagen]

We are also having an Issue with Safari 14. Images are loaded extremely delayed and then they are loaded multiple times (the same image).

In Chrome and Firefox everything is fine...

[aFarkas]

I'm still struggling to reproduce this. I have a new mac now and even with this one (and my old one) I can not reproduce it.

Can anyone of you guys reliably reproduce this and if yes (can I ask some questions) and maybe produce a test case where it is happening more reliable .

Here are already some of them:

1. Does the behavior change if you combine all lazysizes scripts into one or you change the order of your scripts. (remove async or add defer).
2. how looks the rendered HTML on the not working images. is there other scripts involved?

[foria]

we got this problem on Safari 14 but only on Big Sur, for the older OS is fine. After a deep debug I'm not able to tell the exact cause, but it seems that Safari Big Sur has issue to load parallel async code. We did several tests and if we load lazysize alone we don't get any issue but when we start to load more JS code/libraries we experience the issue, without any JS conflict nd only on Safari Big Sur. if you have Safari Big Sur you can see it on us.sandandsky.com