1355371 - When scrolling the page with mouse wheel, some elements lag behind

Status: RESOLVED WONTFIX

(Core :: Panning and Zooming, defect)

Description

[684sigma]

I have a problem with Firefox Beta 53. It also happens in Nightly 55. Doesn't happen in ESR 45
Sometimes when scrolling the page with mouse wheel, some elements lag behind. Here's how to reproduce it:

1. Open https://www.w3schools.com/html/html5_geolocation.asp
2. Scroll the page down then up

Result: header lags behind
Expected: header shouldn't lag behind (should move like in ESR 45)

Comment 1

[684sigma]

List of sites where this bug occurs (element that lags behind is listed above the url):


header, arrows with text - bad even in non-e10s mode. images is separate bug I think...
http://www.epix.com/

backgrounds
https://facebook360.fb.com/learn/

footer (when scrolling to the bottom after closing notification at the top)
https://www.optimum.net/
some elements appear above the header after closing notification at the top
https://www.optimum.net/tv/guide/

block on the right
http://www.muscleandfitness.com/athletes-celebrities/news/obese-beast-guy-bravely-strips-down-show-what-extreme-weight-loss-does?utm_source=outbrain2&utm_medium=cpc

header
http://www.usatoday.com/story/news/world/2016/10/20/iraq-mosul-operation-going-quicker-than-expected/92450398/

block with tracking flags at the left
https://bugs.chromium.org/p/chromium/issues/detail?id=172529

header
http://www.w3schools.com/js/js_if_else.asp
https://www.w3schools.com/html/html5_geolocation.asp

header
https://imgur.com/a/BU6Ov
vertical progress bar at the right side
https://community.imgur.com/t/directly-upload-a-video-to-imgur/16179

https://reviewable.io/reviews/servo/servo/12467

Header
http://knowyourmeme.com/memes/fraternal-kiss-parodies

header
https://livestream.com/watch

header - scroll to the top
http://www.spiegel.de/

header, block at the right
https://www.facebook.com/sosenka.official

background image at the top
https://kuratleclemens.tumblr.com/video

Image in the center of the page (when it's scrolled into view, it blinks)
https://getmyads.com/

scrollbars aren't in sync with scrolling of content
https://www.twitch.tv/geoff

Comment 2

[Justin [:JW_SoftvisionQA]]

Could you please find the regression range for this using Mozregression

http://mozilla.github.io/mozregression/

I can not reproduce this issue.

Comment 3

[684sigma]

Attachment: comparison of ESR 45 and Nightly 55 (2017-04-11), by reporter.webm

(In reply to Justin [:JW_SoftvisionQA] from comment #2)
> Could you please find the regression range for this using Mozregression

Don't have time currently.

> I can not reproduce this issue.

Do you see it on the video? Similar things happen on each site listed in comment 1.

Comment 4

[Alice0775 White]

I can confirm that the lag on https://www.optimum.net/

Disabling APZ fixes the lag.

Comment 5

[Alice0775 White]

regression range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=738d8ee106fe&tochange=af67b5f73381

Comment 6

[Justin [:JW_SoftvisionQA]]

removing ni per comment 4 & comment 5

Comment 7

[Kartikaya Gupta (email:[e-mail])]

I didn't check all the websites you listed but the few that I did check are all because they use scroll-linked effects. That is, they listen for the scroll event and update page content based on that. This used to work fine in the past because we had synchronous scrolling. However since we enabled APZ we have asynchronous scrolling, and this will no longer work perfectly. While this can be annoying to users, overall we feel it is beneficial, because without it you would instead get janky/stuttery scrolling which feels worse.

I'm going to close this bug as WONTFIX because we don't plan on fixing this - it is working as designed. We will continue to try and improve the behaviour by having faster painting but that's going to be an ongoing effort and not something that we can fix in one shot. We already have bugs and work lined up for that effort.

If you feel like the jumping elements are too disruptive to you personally, you can go to about:config and set the "layers.async-pan-zoom.enabled" pref to false and restart the browser. That will restore the behaviour to what it used to be, where you will instead have janky/stuttery scrolling, but all the page elements should remain visually coherent with respect to the scroll position.

Comment 8

[Botond Ballo [:botond]]

See also [1] which describes ways web authors can express scroll-linked effects in ways that work well with APZ.

[1] https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects