Laggy animation with requestAnimationFrame & scrolling

UNCONFIRMED
Unassigned

Status

()

Firefox for Android
General
UNCONFIRMED
3 years ago
a year ago

People

(Reporter: dror3go, Unassigned)

Tracking

(Depends on: 1 bug)

26 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
Created attachment 8346495 [details]
example of the bug

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 (Beta/Release)
Build ID: 20131112160018

Steps to reproduce:

Using requestAnimationFrame and changing a fixed-positioned element's position (with css left or translate3d) produces a laggy movement effect.
For comparison - run on Chrome.

Device: Samsung Galaxy S3, Android 4.1.2

Comment 1

3 years ago
(In reply to dror3go from comment #0)
> Created attachment 8346495 [details]
> example of the bug
> 
> User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101
> Firefox/25.0 (Beta/Release)
> Build ID: 20131112160018
> 
> Steps to reproduce:
> 
> Using requestAnimationFrame and changing a fixed-positioned element's
> position (with css left or translate3d) produces a laggy movement effect.
> For comparison - run on Chrome.
> 
> Device: Samsung Galaxy S3, Android 4.1.2

This is basically expected... We don't update scroll position constantly as we do asynchronous scrolling. While it'd be nice to fix this, I'm not sure it's possible without a dramatic (bad) effect on scrolling performance.

Would be interested in others' opinions on this.

Comment 2

3 years ago
Meanwhile, to achieve an effect that would run better in all mobile browsers, I'd suggest setting a timeout on the scroll change for around 0.5s (fiddle to find out what feels right) that animates your fixed position element into position using CSS transitions, after scrolling has stopped.
(Reporter)

Comment 3

3 years ago
(In reply to Chris Lord [:cwiiis] from comment #1)
> While it'd be nice to fix this, I'm not sure
> it's possible without a dramatic (bad) effect on scrolling performance.
> 
> Would be interested in others' opinions on this.

Please take a look at the testcase under Chrome. The movement on there is really nice and smooth.


(In reply to Chris Lord [:cwiiis] from comment #2)
> Meanwhile, to achieve an effect that would run better in all mobile
> browsers, I'd suggest setting a timeout on the scroll change for around 0.5s
> (fiddle to find out what feels right) that animates your fixed position
> element into position using CSS transitions, after scrolling has stopped.

Changing the position only when scrolling has stopped isn't the desired effect here. I'm looking for a way to display smooth movement of the element *while* scrolling. But this is not the bug's scope :-) Still, it would be nice to here other suggestions for the desired effect.
(Reporter)

Comment 4

3 years ago
I hate to spam here, but are there any plans to improve this?
I don't think we have any short-term plans to improve this. However the long-term solution for this problem is what is being discussed in bug 1042258. That is, you will be able to specify a CSS animation as a function of scroll position rather than time. That will allow us to do this animation asynchronously on the compositor. Some more background reading can be found at:

http://chrislord.net/index.php/2013/12/16/linking-css-properties-with-scroll-position-a-proposal/
http://robert.ocallahan.org/2014/07/implementing-scroll-animations-using.html
Depends on: 1042258
Not sure this is related but you might want to check 
https://webcompat.com/issues/2082
You need to log in before you can comment on or make changes to this bug.