Closed Bug 1860041 Opened 4 months ago Closed 4 months ago

Lazy loading iframe doesn't render until window is resized.

Categories

(Core :: DOM: Core & HTML, defect, P2)

Firefox 120
defect

Tracking

()

VERIFIED FIXED
121 Branch
Tracking Status
firefox-esr115 --- unaffected
firefox118 --- unaffected
firefox119 --- unaffected
firefox120 --- disabled
firefox121 --- verified
firefox122 --- verified

People

(Reporter: stig, Assigned: emilio)

References

(Regression)

Details

(Keywords: regression)

Attachments

(5 files)

If I open this page which have a "lazy iframe" immediately visible (iframe is close to the top of the page), content of iframe doesn't show/render until I resize the browser window:

https://www.rockland.dk/show/?post=414-vr360-tour-at-reffen-street-food-copenhagen

Tested using Nightly 120 (2023-10-19) on Windows 10.

I would have commented directly on Bug 1622090 first before eventually creating this bug, but I was not allowed to comment on 1622090.

(I'm on my work-pc now - As a sidenote I saw different behaviour home on my private Win11 pc. I can't remember if I resized window to get it to render at home, but the unrendered "box" was white instead as dark as the page is when dark mode is preferred. However the "box" was dark now when loading on my Win10 work-pc (which also is in dark-mode). So that behaviour/observation probably needs further investigation)

Keywords: regression
Regressed by: 1622090

Thanks for the report. Which iframe on the page doesn't load? I can't reproduce locally on Windows 11, everything loads fine for me.

Flags: needinfo?(stig)

(In reply to Oliver Medhurst [:canadahonk] from comment #1)

Thanks for the report. Which iframe on the page doesn't load? I can't reproduce locally on Windows 11, everything loads fine for me.

As posted @hsinyi. The blurry "360 panorama" just below headline "VR 360 tour at REFFEN Street Food venue".
Will investigate further on multiple Win11 PCs when I'm back home from work.

Flags: needinfo?(stig)

Further observation. Behaviour not fully consistent.
But it looks like you increase the change of seeing issue with a very wide browser-window when loading (wider than the max-width of the page content). If iframe doesn't render in this case, I have to resize browser-window to be more narrow than the "max-width of the page content" before it renders.
But unfortunately, behaviour doesn't seem to 100% consistent, even when clearing cached webcontent first :-/ ...

I had difficulty reproducing issue on first posted page/link, so tried another page with same kind of iframe, and I saw the issue again (entering with a wide browser-window):

https://www.rockland.dk/show/?post=402-panono-photosphere-camera

Also scrolling down on this page doesn't help or trigger loading of any of the iframes further down this page (either).
Making browser-window wider doesn't help.
It is not until I make the browser-window narrow enough to trigger a "reflow" of the page, that the iframes are rendered.

Summary: Lazy loading iframe (at top of page) doesn't render until window is resized. → Lazy loading iframe doesn't render until window is resized.

Thanks for more info. I can mostly consistently repro with the 3rd (below viewport) iframe with the new link.

Status: UNCONFIRMED → NEW
Ever confirmed: true

We're going to make dom.iframe_lazy_loading.enabled on only for Nightly in bug 1860057 and continue investigating this issue.
Once bug 1860057 is fixed, we should reflect firefox120-status as disabled.

See Also: → 1860057

Set release status flags based on info from the regressing bug 1622090

Debugging: I managed to have devtools open on page load but without the broken iframe appearing. It looks like it actually has loaded, the network tab shows requests to the iframe src URL and its resources, however it still does not appear until a resize?

I can reproduce this issue on Nightly120.0a1 Windows10.

Steps to reproduce(100% reproducible):

  1. Open https://www.rockland.dk/show/?post=414-vr360-tour-at-reffen-street-food-copenhagen .
  2. Scroll the page so that the image is out of the screen.
  3. Reload the page (press F5).
  4. Scroll to the top of the page.
Severity: -- → S3
Priority: -- → P2
Flags: needinfo?(emilio)
Attached file Reduced test-case.

Set release status flags based on info from the regressing bug 1622090

Flags: needinfo?(emilio)

Remove a leftover PropagateIsUnderHiddenEmbedderElement because it's
done by the frame initialization now.

Assignee: nobody → emilio
Status: NEW → ASSIGNED

It's done as a result of ShowViewer via
https://searchfox.org/mozilla-central/rev/10d0e01455559a433670bd718a3ecc0ece5d2cb9/layout/generic/nsSubDocumentFrame.cpp#214

We have existing tests for this in
layout/base/tests/chrome/test_css_visibility_propagation.xhtml

Depends on D191750

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1ce8e74a8495
Make sure frameloader is initialized after lazy-loading if there's a frame. r=CanadaHonk
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42719 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 4 months ago
Resolution: --- → FIXED
Target Milestone: --- → 121 Branch
Upstream PR merged by moz-wptsync-bot

Could you verify this is now fixed for you in the latest Nightly? Thanks!

Flags: needinfo?(stig)

(In reply to Oliver Medhurst [:canadahonk] from comment #20)

Could you verify this is now fixed for you in the latest Nightly? Thanks!

Looks good! I'm unable to reproduce problem again 👍

Flags: needinfo?(stig)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ce62de041fca
Remove a leftover PropagateIsUnderHiddenEmbedderElement call. r=CanadaHonk,layout-reviewers,tnikkel
Status: RESOLVED → VERIFIED

Backed out for causing failures on test_focus_display_none_xorigin_iframe.html

[task 2023-10-25T19:40:38.165Z] 19:40:38  WARNING -  TEST-UNEXPECTED-FAIL | dom/base/test/test_focus_display_none_xorigin_iframe.html | focus should stay on input element - got "IFRAME", expected "INPUT"
[task 2023-10-25T19:40:38.165Z] 19:40:38     INFO -      SimpleTest.is@SimpleTest/SimpleTest.js:509:14
[task 2023-10-25T19:40:38.165Z] 19:40:38     INFO -      test_ancestor_display_none_init@dom/base/test/test_focus_display_none_xorigin_iframe.html:59:5
[task 2023-10-25T19:40:38.165Z] 19:40:38     INFO -      async*nextTick/<@SimpleTest/SimpleTest.js:2189:34
[task 2023-10-25T19:40:38.165Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2233:11
[task 2023-10-25T19:40:38.165Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.166Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.167Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.168Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -      setTimeout handler*SimpleTest_setTimeoutShim@SimpleTest/SimpleTest.js:922:41
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -      nextTick@SimpleTest/SimpleTest.js:2149:21
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -  add_task | Leaving test_ancestor_display_none_init
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -  add_task | Entering test_remove_ancestor_display_none
[task 2023-10-25T19:40:38.169Z] 19:40:38     INFO -  TEST-PASS | dom/base/test/test_focus_display_none_xorigin_iframe.html | focus should move to input element
Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Flags: qe-verify+

Reproducible on a 2023-10-19 Nightly build on Windows 10.
Verified as fixed on Firefox 121.0b4 and Nightly 122.0a1 on Windows 10, Ubuntu 22, macOS 12.

You need to log in before you can comment on or make changes to this bug.