949409 - Laggy animation with requestAnimationFrame & scrolling

Status: RESOLVED INACTIVE

(Firefox for Android Graveyard :: General, defect)

Description

[dror3go]

Attachment: 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

[Chris Lord [:cwiiis]]

(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

[Chris Lord [:cwiiis]]

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.

Comment 3

[dror3go]

(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.

Comment 4

[dror3go]

I hate to spam here, but are there any plans to improve this?

Comment 5

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

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

Comment 6

[Karl Dubost💡 :karlcow]

Not sure this is related but you might want to check 
https://webcompat.com/issues/2082

Comment 7

[miralobontiu]

Hi,

Does this issue still reproduce?

Thanks!

Comment 8

[Firefox Bug Husbandry Bot]

Closing per https://bugzilla.mozilla.org/show_bug.cgi?id=1473195

Contact :susheel if you think this bug should be re-opened