1910887 - OOP iframes (twitter, ads) flicker while scrolling in the page on hurriyet.com.tr

Status: NEW

(Core :: Web Painting, defect)

Description

[Bogdan Maris, Desktop Test Engineering]

Found in

• Firefox 128.1.0esr

Affected versions

• Firefox 128.1.0esr
• Firefox 129.0
• Latest nightly 130.0a1
• Firefox 115.14.0esr

Tested platforms

• Affected platforms: macOS 13.6, Windows 11, Ubuntu 22.04
• Unaffected platforms: none

Preconditions

• Not having an adblock will make the bug more visually reproducible.

Steps to reproduce

1. Visit https://www.hurriyet.com.tr/ekonomi/bakan-simsek-olumlu-gorunum-suruyor-42497081
2. Wait for the page to fully load
3. Scroll the page (mouse wheel, scrollbar, trackpad)

Expected result

• No visual glitches are seen in the page.

Actual result

• Masive glitches for the Twitter section and vertical side ads while scrolling.

Regression range

• Not a recent regression since multiple versions of Firefox are affected Fx115 included, will go back a bit more but I have a feeling that its not a regression.

Additional notes

• This could be a website issue since its kind of an obvious one to slip unseen for so long.
• Chrome is not affected by this
• Please change the Component to webcompat if it turns out that it does not belong in Core::Layout.
• Video showing the issue (size is over 60MB): https://drive.google.com/file/d/1_wzUKirooEn8OizJtZWWJ_SsZYzvKoEy/view?usp=drive_link

Comment 1

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=383986e2f5cb835a55c47bbd6e15d81035ca0784&tochange=d6e8528f0a936df88369c71f4e390e31a4d621a1

Comment 2

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

:nika, since you are the author of the regressor, bug 1732358, could you take a look?

For more information, please visit BugBot documentation.

Comment 3

[Nika Layzell [:nika] (ni? for response)]

This being regressed by fission is unfortunately not a super useful regression window. Based on the symptoms I'm thinking this is probably some weird interaction with APZ and multiprocess, but I don't know for certain.

Comment 4

[Alice0775 White]

Regression window w/ fission.autostart = true :
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=0a724aa35cdbb7ceef51f7af26a6aa7b5058682f&tochange=fddc190c5af5d9844851e7790602a47b7979536f

Regressed by: 2d0db7ddd092eed08468bfa23e6774cbee1ae21b Matt Woodrow — Bug 1588484 - Disable Advanced Layers for now when using fission for the window.

Comment 5

[Daniel Holbert [:dholbert]]

Probably Bug 1588484 really just made this easier to see/trigger (by making rendering a bit more async, or something along those lines), rather than being directly responsible.

I captured a profile of myself scrolling slowly down the page until the bug starts reproducing. (Notably, it only starts happening once you've scrolled far enough): https://share.firefox.dev/46WCsTJ

The first flicker happens at about t=24.98s, here: https://share.firefox.dev/3XaN1PZ

I think this might be from some frame reconstruction, if I'm reading the profile correctly.

Here's another profile where I reduced the page substantially (by adding display:none to a bunch of unnecessary content/ads, while preserving the bug), and then scrolled up and down, to get more samples of just-the-actions-that-trigger-the-bug: https://share.firefox.dev/3X6VnIa

I think I've isolated the issue; more details in next comment.

Comment 6

[Daniel Holbert [:dholbert]]

So the profiles seem to show frame reconstruction coming from restyles where the restyles are triggered by a call to DOMTokenList.add inside of a function called stickyPageSkin in the page's JS, which runs whenever I scroll.

Here are (I think) the relevant lines from that function:

n = document.querySelector('.page-wrapper'),
[...]
r + e.clientHeight + 100 < t.offsetTop + t.clientHeight ?
  (e.classList.add('fixed'),
  n.classList.add('o-visible'))
  :
  (e.classList.remove('fixed'),
  n.classList.remove('o-visible'))

The addition/removal of the o-visible class here is the key thing in that JS.

Normally this .page-wrapper element has:

.page-wrapper {
[...]
  overflow-x: hidden;

...but o-visible gets briefly added and then removed during a scroll operation, and that activates this rule:

@media screen and (min-width: 1024px) {
  .page-wrapper.o-visible {
    overflow-x: visible;
  }

So the page is toggling overflow-x between visible and hidden on a root element (back and forth), which causes frame reconstruction, which causes iframe content to flash as we rebuild the rendering constructs for the iframe.

Comment 7

[Daniel Holbert [:dholbert]]

So this is essentially the same thing discussed in bug 1764655 comment 9:

Anything that causes reconstruct of the frame of a oop iframe could lead to this flicker.

In that bug (bug 1764655), it was dynamic scrollbar-width changes, and we were able to land a patch to avoid reconstructing frames for that case.

In this bug, it's overflow changes (between visible and non-visible), where I suspect we can't avoid reconstructing frames, since the container's frame type is necessarily changing with the dynamic restyle -- it toggles between requiring/not-requiring a ScrollContainerFrame wrapper for the element.

So:

• frame-reconstruction here is probably unavoidable.
• But I think the flicker itself might be avoidable... Probably bug 1750189 would help with this, if I'm reading it (and bug 1764655 comment 7) correctly.