Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Safari doesn't load images within view on page load #500

Open
dracos opened this issue Dec 16, 2022 · 5 comments
Open

Safari doesn't load images within view on page load #500

dracos opened this issue Dec 16, 2022 · 5 comments

Comments

@dracos
Copy link
Contributor

dracos commented Dec 16, 2022

This polyfill has been working well for us for years, thanks (looks like I contributed to it at one point, in fact :) ). Now, in Safari 16 here, the images that are 'in view' at page load are not loaded. For example, see the first few images on https://www.theyworkforyou.com/mps/ or the ones around letter M if you go straight to https://www.theyworkforyou.com/mps/#M . This doesn't appear to be a bug in the polyfill, in that I can see the intersectionObservers existing, firing, removing the data and adding the correct src - but Safari does not then load the image. I'll post a ticket to Safari as well, but I'm posting here just in case I've missed something.

@dracos
Copy link
Contributor Author

dracos commented Dec 16, 2022

This was with Safari 16.0. It does still happen with Safari Beta 16.3, but doesn't appear to happen with current Safari Tech Preview. So I assume it must be a bug in Safari they have fixed. Can't think of a workaround though, annoyingly.

@mfranzke
Copy link
Owner

@dracos thanks a lot for reporting this strange behaviour. I can reproduce the problem even though that it's really strange and I would need to investigate further.

@mfranzke
Copy link
Owner

mfranzke commented Dec 18, 2022

It's strange because it works out of another context (JSBin instead of the website you've provided):
https://output.jsbin.com/fuvicolulu/1

@mfranzke
Copy link
Owner

@dracos by the way, what's the polyfills versions you're using ?

@dracos
Copy link
Contributor Author

dracos commented Dec 20, 2022

On that page, it's 1.2.0. Replacing it with the one in your jsbin it does load them (though with a long pause).
I've put up https://dracos.co.uk/temp/2022-12-loading-polyfill/mps-1.5.4.html with 1.5.4 and https://dracos.co.uk/temp/2022-12-loading-polyfill/mps-2.1.0.html with 2.1.0. It looks like it works in 2.1.0 because v2 split out image/iframe support checking, so 2.1.0 in Safari for image only replaces the noscript with its contents and lets the native support handle it, whereas 1.5.4 (as Safari doesn't have iframe support) sets up the intersection observers etc on everything. Looks like might be/related to this Safari bug: https://bugs.webkit.org/show_bug.cgi?id=237703
We can upgrade to latest, sorry for not trying first, but still, bit odd!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants