1350865 - Parallax background scrolling is jittery

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[alonsh]

Attachment: firefox-bug.mov - I showed you that the bug is not reproduced in version 46.0.1 but 47.0.1

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36

Steps to reproduce:

Please read the "important things" in this section:

**Steps:**
Please note: I attached a video that illustrates this bug.

1) Enter this site:
http://codepen.io/janpaepke/pen/raQdEr

* There are four frames in this page. The relevant frame is the bottom frame (It has a light blue background). Let's call it VIEW.

2) In the VIEW, scroll down till you see a gray background with some shapes.

3) When you see the shapes background, scroll up and down, up and down.

**Important things:**

I tried to know why the bug happens.
I guess it will help you:

Firefox (no matter OS):

41.0.1 - There is no bug.
43.0.1 - There is no bug.
46.0.1 - There is no bug.
47.0.1 - The bug started from this version.
47.0.2 - The bug is reproduced.
52.0.1 - The bug is reproduced.

This is the release notes of version 47.0.1:
https://www.mozilla.org/en-US/firefox/47.0.1/releasenotes/

In this version, you fixed: "Detect SSE hardware version".
This is related to this bug: "Add CPU features/detection to update URL".
The details of the issue are here: https://bugzilla.mozilla.org/show_bug.cgi?id=1271761

Hope I help you to know what is the code area of this problem.


Actual results:

The background "jumps"/"shakes".


Expected results:

The background should work as in 46.0.1 version.

Comment 1

[alonsh]

Hi,

Did someone read this bug details?
I saw that it's not assigned but other bugs, that were created after my bug, were assigned.

Thanks,
Alon.

Comment 2

[Loic]

Attachment: index.html

I don't really see the difference in your screencast when I test the testcase locally.

Comment 3

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

I can reproduce a little jitter in the parallax background on OS X (54 aurora and 55 nightly). The page is using a scroll listener to generate the parallax effect, and the devtools console properly reports that the page is using a Scroll-Linked Effect that may not work properly with async scrolling. Unless the parallax is written in pure CSS there's not much we can do here.

Comment 4

[alonsh]

Hi Loic and thank you for your reply!

I attached another screencast of another example.
I hope it will let you see the difference.

Steps to reproduce:
-------------------

1) Enter: https://www.wix.com/

2) click on "sign in" button (top right corner)

3) enter the next fields:
      email: [e-mail]
      password: 123456

4) click "log in" button

5) enter this url:
http://www.wix.com/website/builder/?referral=split%20page&vertical=business#!/builder/story/d49846a4-cb10-4811-a9fd-54369295f670:3a656019-962f-4aa1-a1f1-151f8eb64df1

(Please wait for the spinner to be hidden)

6) scroll top and bottom

Actual result:
plus circles jump (Firefox 47.0.1).

Expected result:
plus circles stay in the same position (Firefox 46.0.1)

------

Screencast:

46.0.1 (expected)
https://drive.google.com/open?id=0B0bMIHSVOeGiLVpBNnVIaUNIbTg

47.0.1 (actual)
https://drive.google.com/open?id=0B0bMIHSVOeGiemJRYUthUjRYYjQ


Thank you again,
Alon.

Comment 5

[alonsh]

Please read my other comment and let me know if you think it's the same reason as Kartikaya Gupta wrote.

Thanks,
Alon.

Comment 6

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

(In reply to alonsh from comment #4)
> 5) enter this url:
> http://www.wix.com/website/builder/?referral=split%20page&vertical=business#!
> /builder/story/d49846a4-cb10-4811-a9fd-54369295f670:3a656019-962f-4aa1-a1f1-
> 151f8eb64df1
> 
> (Please wait for the spinner to be hidden)
> 
> 6) scroll top and bottom
> 
> Actual result:
> plus circles jump (Firefox 47.0.1).
> 
> Expected result:
> plus circles stay in the same position (Firefox 46.0.1)

This appears to be basically the same problem but I wasn't able to confirm it because the plus circles disappear when I try to use the devtools with them. I couldn't find a way to keep the circles visible and inspect their properties at the same time. But the web console does print out the same Scroll-Linked Effects warning, and visually it does look like it's lagging behind because it's position is being updated based on the scroll event. So same root cause as the parallax problem.

Comment 7

[alonsh]

Sorry for the delay in response and thank you for your reply:

I attached a video for how you can cause the plus circles to not disappear.

In short: add "hover" to these buttons (inspect button element and add "hover").

This is the video: https://goo.gl/photos/DS5jZSaQGtcbWxjt7

Honestly, I don't really understand why the scroll causes this bug:
If it causes this bug, it should cause it in all FF versions,
But it causes this bug in 47 - 52 versions but not in 46 version..
That's why I thought that it's because of this FF fix: "Detect SSE hardware version" (that was in 47 version: the first version that the bug started).

Thank you very very much! I really appreciate it!

Alon.

Comment 8

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

So after some investigation it looks like the plus circles are actually scrolling fine with APZ, it's the "content" in the background that's not. End result is the same though - the two get out of sync because one is scrolling via JS on the main thread and the other is scrolling asynchronously with APZ.

The bug appears in 47 and up presumably because that version is when APZ got enabled for you. Before that all our scrolling was synchronous and on the main thread. For more information on APZ, please take a look at [1] and [2]. The article at [1] says it was enabled in 46, but it's actually more complicated than that and depends on a number of conditions, so I suspect in your case you didn't get it until 47.

[1] https://hacks.mozilla.org/2016/02/smoother-scrolling-in-firefox-46-with-apz/
[2] https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects