lazysizes
lazysizes copied to clipboard
aFarkas
Using src + data-src and loading=lazy loads the src in Firefox and Safari
Describe the bug
Using lazySizes with iframe and a placeholder src and loading=lazy makes the placeholder src win.
Also see https://github.com/whatwg/html/issues/10213
Possibly related: https://github.com/aFarkas/lazysizes/issues/705 , https://github.com/aFarkas/lazysizes/issues/927
To Reproduce https://software.hixie.ch/utilities/js/live-dom-viewer/saved/12475
Steps to reproduce the behavior:
<!DOCTYPE html>
<script src=http://afarkas.github.io/lazysizes/lazysizes.min.js></script>
<iframe class=lazyload loading=lazy src="data:,original src" data-src="data:,data-src"></iframe>
What is the expected behavior:
Web pages with this pattern appear to expect the data-src to "win".
I think lazySizes could remove loading attributes on iframes with a lazyload class so that the placeholder src is loaded eagerly and to avoid timing issues with which navigation is the last one, in current Firefox and Safari. Or at least remove loading attribute right before location.replace.
What happened instead:
In Firefox and Safari (maybe subject to timing), the location.replace() navigation happens first and then the browser lazy-loads the src URL.
In what environment (browser/device etc.) does this bug happen/not happen: Firefox, Safari: yes Chrome: no
Keywords help others to find this issue:
