Body background image appears while scrolling quickly (long rasterize times)

NEW
Unassigned

Status

()

Core
Graphics
P3
normal
a year ago
10 months ago

People

(Reporter: Bruno Tavares, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(firefox56 unaffected, firefox57 fix-optional)

Details

(Whiteboard: [gfx-noted], URL)

Attachments

(1 attachment)

(Reporter)

Description

a year ago
Hi folks,

Congratulations on landing Stylo on Firefox Nightly.

I've put it to test today, and I've noticed this website where there were issues rendering the webpage when it is scrolling fast.

Here is the link for the page:

http://magsports.drupalet.com/homepage-2

Behavior noticed:

- When scrolling slowly things are ok
- When scrolling faster, then main content disappears and there is only the static background image showing up.

I've recorded a video attached to show the example.

This is not an high impact issue, I was just browsing but I thought of sharing with you all for testing purpose.
This looks like a APZ scrolling issue, rather than stylo. Thanks for filing!
Component: CSS Parsing and Computation → Graphics
Summary: Stylo: → Body background image appears while scrolling quickly
I can reproduce it on Nightly in macOS.
It seems that it has something to do with APZ.

Hi :kats, any thought about this one?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(bugmail)
Priority: -- → P3
Has STR: --- → yes
It doesn't look like the video got attached. Could you please post it so I can make sure I'm seeing the same thing?
Flags: needinfo?(bugmail) → needinfo?(connect)
Component: Graphics → Panning and Zooming
Whiteboard: [gfx-noted]
(Reporter)

Comment 4

a year ago
Created attachment 8890400 [details]
StyloScrollingIssue.mp4

I'm submitting again. I had sent a .mov, but I will convert it to a .mp4 just in case.
Flags: needinfo?(connect)
Thanks! I see the same issue, although it appears much worse for you than for me. This looks like regular checkerboarding - we can't paint the page content fast enough so when scrolling we just end up showing whatever fixed content is behind, which is the background image.

I checked with and without stylo and got about the same results, so I don't think stylo made this any worse than it already was. I also grabbed a profile to see what the main thread is doing when I hit rapidly hit home/end to scroll up and down.

https://perfht.ml/2uZldkP

The profile shows that the page has scroll event listeners which are sometimes taking upwards of 20ms to run, so that's not great. However we're also spending a lot of time in rasterization, and a lot of that is in ShmemTextureData::Create (I took the profile on OS X, might be different on other platforms).
Component: Panning and Zooming → Graphics
Summary: Body background image appears while scrolling quickly → Body background image appears while scrolling quickly (long rasterize times)
The fact that the background image appears instead of a flat color might be a regression from bug 1349418.
Blocks: 1349418
status-firefox56: --- → unaffected
status-firefox57: --- → affected
Flags: needinfo?(matt.woodrow)
It looks like a somewhat intentional regression from bug 1349418. It looks like a sub-frame that's scrolling, and we made the decision there to not attempt to draw checkerboard (extending the background color of the scrolled content) for subframes.

If we stick with that decision, then this is expected behaviour, and we just need to get better at painting fast to stop it showing up.
Flags: needinfo?(matt.woodrow)
status-firefox57: affected → fix-optional
You need to log in before you can comment on or make changes to this bug.