whatwg/html

Web compat: Navigating a lazy-loading iframe with location.replace

zcorpan opened this issue · 3 comments

What is the issue with the HTML Standard?

See https://bugzilla.mozilla.org/show_bug.cgi?id=1882670

Some pages use the lazysizes library with lazy-loaded iframes with the intended source in a data-src attribute and a placeholder in the src attribute, as documented in https://github.com/aFarkas/lazysizes?tab=readme-ov-file#how-to but also specify loading="lazy".

The code at https://github.com/aFarkas/lazysizes/blob/gh-pages/src/lazysizes-core.js#L484 invokes location.replace() before the iframe has lazily loaded, which navigates the iframe. When the browser determines that the iframe is sufficiently in view, it invokes the lazy load resumption steps which navigates to the URL in the src attribute (except Chrome doesn't, it seems).

Demo: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/12473

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. (Filed aFarkas/lazysizes#994) cc @aFarkas

But also I think the spec can be changed such that navigating an iframe where will lazy load element steps is true will set the iframe's lazy load resumption steps to null. If script invokes a navigation, it seems reasonable to expect that the script-initiated navigation isn't overridden by lazy-loading the src. Does this match what is implemented in Chromium? cc @domfarolino

cc @rwlbuis @smfr

What you said in the last paragraph is what makes sense to me.

Does this match what is implemented in Chromium? cc @domfarolino

Looks like it, yes: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/local_frame.cc;l=504-505;drc=9910d3be894c8f142c977ba1023f30a656bc13fc.

I am not sure about other browsers, and relatedly I am not sure about WPT support for this scenario in general.

@domfarolino Gecko and WebKit match the current spec (they don't cancel the lazyload).

I'll write WPTs. Thanks!