Using src + data-src and loading=lazy loads the src in Firefox and Safari
zcorpan opened this issue · 0 comments
Describe the bug
Using lazySizes with iframe and a placeholder src and loading=lazy makes the placeholder src win.
Also see whatwg/html#10213
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: