1434135 - terrible animation performance

Status: UNCONFIRMED

(Core :: DOM: Animation, defect, P3)

Description

[maxavatar007]

Attachment: Firefox 2018-01-30 03.20 profile.sps.json.gz

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
Build ID: 20180129100406

Steps to reproduce:

Opened my profile on shikimori.org the full link is https://shikimori.org/MaxAvatar


Actual results:

It started to lag. A lot.


Expected results:

It should't have laged.

Comment 1

[maxavatar007]

I mean the translateY animations on my avatar and bars on the graph below sry

Comment 2

[Hiroyuki Ikezoe (:hiro)]

All CSS animations on https://shikimori.org/MaxAvatar that I can see on devtools run on the compositor.  

And from the profile, there are styling process on the main thread, but it happens approximately every 200ms, so I think it's caused by unthrottling transform animations periodically (every 200ms).

So from the perspective of animations, it works fine.  There might be other room for improvement though.

Comment 3

[maxavatar007]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #2)
> All CSS animations on https://shikimori.org/MaxAvatar that I can see on
> devtools run on the compositor.  
> 
> And from the profile, there are styling process on the main thread, but it
> happens approximately every 200ms, so I think it's caused by unthrottling
> transform animations periodically (every 200ms).
> 
> So from the perspective of animations, it works fine.  There might be other
> room for improvement though.

Open this page in chrome, it will run smooth as butter.

Comment 4

[maxavatar007]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #2)
> All CSS animations on https://shikimori.org/MaxAvatar that I can see on
> devtools run on the compositor.  
> 
> And from the profile, there are styling process on the main thread, but it
> happens approximately every 200ms, so I think it's caused by unthrottling
> transform animations periodically (every 200ms).
> 
> So from the perspective of animations, it works fine.  There might be other
> room for improvement though.

Here is a comparison (Left - Nightly, Right - Chrome)
https://gfycat.com/ObedientChubbyBluebottle

Comment 5

[Hiroyuki Ikezoe (:hiro)]

I think that's because chrome does not try to update scroll bar even if the transform animation is inside the element which has the scroll bar.

That's said, in the site case I don't see any scrollbars there, so we could do more strict check in CanThrottleTransformChangesForCompositor().

Comment 6

[maxavatar007]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #5)
> I think that's because chrome does not try to update scroll bar even if the
> transform animation is inside the element which has the scroll bar.
> 
> That's said, in the site case I don't see any scrollbars there, so we could
> do more strict check in CanThrottleTransformChangesForCompositor().

I don't know how browsers work and what you are talking about, so I'll leave it to professionals to figure out.

Comment 7

[Hiroyuki Ikezoe (:hiro)]

(In reply to maxavatar007 from comment #6)
> (In reply to Hiroyuki Ikezoe (:hiro) from comment #5)
> > I think that's because chrome does not try to update scroll bar even if the
> > transform animation is inside the element which has the scroll bar.
> > 
> > That's said, in the site case I don't see any scrollbars there, so we could
> > do more strict check in CanThrottleTransformChangesForCompositor().
> 
> I don't know how browsers work and what you are talking about, so I'll leave
> it to professionals to figure out.

Thanks!  Your bug report made us realize that there is still room to improvement.

https://treeherder.mozilla.org/#/jobs?repo=try&revision=a49f8786f85cb4d259ee78c3caedd097405fbe9b

I hope this try fixes the lag to some extent.

I will send need info to you once the build finished.

Thank you!

Comment 8

[Hiroyuki Ikezoe (:hiro)]

maxavatar007, could you please try this binary and see if it improves the lag?

I've confirmed that the transform animations for the vertical bars are not unthrottled any more (i.e. getting smooth), but there is another (or more) transform animation that is unthrottled periodically unfortunately. 

https://queue.taskcluster.net/v1/task/a71vJtiVSVKjw6I9a3dtqw/runs/0/artifacts/public/build/target.zip

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Note that the binary is not a PGO build, that means it's bit slower than normal nightly.

Comment 10

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #8)
> maxavatar007, could you please try this binary and see if it improves the
> lag?
> 
> I've confirmed that the transform animations for the vertical bars are not
> unthrottled any more (i.e. getting smooth), but there is another (or more)
> transform animation that is unthrottled periodically unfortunately. 

The element is img element for avator, and the outer scrollable element is HTML and the HTML element has the vertical scroll bar.  So we have to unthrottle it unfortunately.

Comment 11

[maxavatar007]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #8)
> maxavatar007, could you please try this binary and see if it improves the
> lag?
> 
> I've confirmed that the transform animations for the vertical bars are not
> unthrottled any more (i.e. getting smooth), but there is another (or more)
> transform animation that is unthrottled periodically unfortunately. 
> 
> https://queue.taskcluster.net/v1/task/a71vJtiVSVKjw6I9a3dtqw/runs/0/
> artifacts/public/build/target.zip

Its exactly the same, and why dont you try it yourself? I left the link to the page above so anyone could try it, thats not my OS or hardware which causes the lag but firefox core.

Comment 12

[Hiroyuki Ikezoe (:hiro)]

(In reply to maxavatar007 from comment #11)
> (In reply to Hiroyuki Ikezoe (:hiro) from comment #8)
> > maxavatar007, could you please try this binary and see if it improves the
> > lag?
> > 
> > I've confirmed that the transform animations for the vertical bars are not
> > unthrottled any more (i.e. getting smooth), but there is another (or more)
> > transform animation that is unthrottled periodically unfortunately. 
> > 
> > https://queue.taskcluster.net/v1/task/a71vJtiVSVKjw6I9a3dtqw/runs/0/
> > artifacts/public/build/target.zip
> 
> Its exactly the same, and why dont you try it yourself?

That's because the animations on the site originally are smooth on my machine.

> I left the link to
> the page above so anyone could try it, thats not my OS or hardware which
> causes the lag but firefox core.

I believe the patch can improve in some sort of situations but it's not for the site unfortunately.

Thanks, anyway.

Comment 13

[maxavatar007]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #12)
> (In reply to maxavatar007 from comment #11)
> > (In reply to Hiroyuki Ikezoe (:hiro) from comment #8)
> > > maxavatar007, could you please try this binary and see if it improves the
> > > lag?
> > > 
> > > I've confirmed that the transform animations for the vertical bars are not
> > > unthrottled any more (i.e. getting smooth), but there is another (or more)
> > > transform animation that is unthrottled periodically unfortunately. 
> > > 
> > > https://queue.taskcluster.net/v1/task/a71vJtiVSVKjw6I9a3dtqw/runs/0/
> > > artifacts/public/build/target.zip
> > 
> > Its exactly the same, and why dont you try it yourself?
> 
> That's because the animations on the site originally are smooth on my
> machine.
> 
> > I left the link to
> > the page above so anyone could try it, thats not my OS or hardware which
> > causes the lag but firefox core.
> 
> I believe the patch can improve in some sort of situations but it's not for
> the site unfortunately.
> 
> Thanks, anyway.

My friend has the same lag on his machine ¯\_(ツ)_/¯

Comment 14

[bull500]

im willing to test the if there's a linux build. it seems im affected as well 
also on closer inspection there seems to be a vertical space between the bars that does not appear in chromium

Comment 15

[bull500]

the test build doesn't improve the situation  
tested on win 7