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

Status: VERIFIED FIXED

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

Description

[Stig Nygaard]

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)

Comment 1

[Oliver Medhurst [:canadahonk]]

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.

Comment 2

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Attachment: iframe_not_loading.png

Comment 3

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Attachment: iframe_expected.png

Comment 4

[Stig Nygaard]

(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.

Comment 5

[Stig Nygaard]

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 :-/ ...

Comment 6

[Stig Nygaard]

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.

Comment 7

[Oliver Medhurst [:canadahonk]]

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

Comment 8

[Hsin-Yi Tsai (she/her) [:hsinyi]]

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.

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 10

[Oliver Medhurst [:canadahonk]]

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?

Comment 11

[Alice0775 White]

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.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case.

Comment 13

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1860041 - Make sure frameloader is initialized after lazy-loading if there's a frame. r=canadahonk

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

Comment 15

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1860041 - Remove a leftover PropagateIsUnderHiddenEmbedderElement call. r=CanadaHonk,#layout

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

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1ce8e74a8495
Make sure frameloader is initialized after lazy-loading if there's a frame. r=CanadaHonk

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/42719 for changes under testing/web-platform/tests

Comment 18

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/1ce8e74a8495

Comment 19

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 20

[Oliver Medhurst [:canadahonk]]

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

Comment 21

[Stig Nygaard]

(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 👍

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ce62de041fca
Remove a leftover PropagateIsUnderHiddenEmbedderElement call. r=CanadaHonk,layout-reviewers,tnikkel

Comment 23

[Gregory Pappas [:gregp]]

comment 21

Comment 24

[Natalia Csoregi [:nataliaCs]]

Backed out for causing failures on test_focus_display_none_xorigin_iframe.html

• backout: https://hg.mozilla.org/integration/autoland/rev/e12d55fc3debdad22d4ceebdb0a16110e82afad9
• push: https://treeherder.mozilla.org/jobs?repo=autoland&group_state=expanded&selectedTaskRun=AP8xmgbfRJyYwdLKWQqxfA.0&revision=ce62de041fca8a9902998eccffd3af9f051e79ba
• failure log: https://treeherder.mozilla.org/logviewer?job_id=433788705&repo=autoland&lineNumber=3431

[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

Comment 25

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

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.