New issue
Advanced search Search tips

Issue 644732 link

Starred by 3 users
Status: Archived
Owner: ----
Closed: Sep 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Material Design UI button animation kills content animation/transition perfomance

Reported by gordonra...@gmail.com, Sep 7 2016 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

Steps to reproduce the problem:
1. Open the attached testcase (example.html).
2. Open developer tools and begin recording a timeline.
3. Click the browsers 'back' button. Then 'forward', then 'back' repeatedly etc.
4. Repeat the process, but this time use the provided 'ANIMATE' button to toggle the animations state instead of the navigation buttons.
5.  Compare the two recorded timelines.

What is the expected behavior?
The elements transitions in and out smoothly.

What went wrong?
The new Material design button click animation on Chrome's navigation buttons has a dramatic impact on any running transitions/animations in the web pages content.

I have attached two timelines I recorded on my five year old core i7 laptop, to illustrate the difference.

"nav-buttons-timeline.png":

Using the nav buttons, the animation locks at around 30fs and is very janky.

"animate-button-timeline.png":

Using the 'ANIMATE' button, the animation is a smooth 60fps.

For most in-content animations this is not a problem as the new UI button animation should not be running.  However, if a web-app attaches an animation to the 'history.popstate' event, as in my testcase, then the navigation button's animation runs at the same time as the content animation, resulting in terribly janky performance.

Animations and page transitions attached to navigation buttons are becoming more common, especially since designers are beginning to follow 'Material Design' guidelines.  Any animations in the browser's UI should not negatively effect animations in the content/app itself.

Did this work before? N/A 

Chrome version: 53.0.2785.89  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 22.0 r0
example.html
170 KB View Download
nav-buttons-timeline.png
106 KB View Download
animate-button-timeline.png
110 KB View Download

Comment 1 by gordonra...@gmail.com, Sep 7 2016 

If I force disable vSync with the "--disable-gpu-vsync" command line option, then both the content animation, and the material design nav-button animation run smoothly.

If you download revision 401791 from:

https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Win_x64/401791/

Extract, and run chrome.exe.  You will see that even with the material design nav button animation, the test case passes and the result is a smooth 60fps with both the UI and content animations playing at the same time.

Any newer revision than 401791 exhibits the janky behavior.

While I am no expert in Chrome's internals, it would appear that the UI animations and content animations are not properly in sync with each other, and with the browsers refresh rate, causing the frames to 'pile up' on top of one another rather than both being handled together in the same monitor tick.  Ultimately, Chrome ends up halving the frame-rate in the content.

This bug has been filed as a result of my investigation into a previous bug I filed:

https://bugs.chromium.org/p/chromium/issues/detail?id=643241

My apologies if refiling was not the correct course of action, but it seemed to make sense to me, given that Iwas able to narrow the issue down to the Chrome UI animation.
Project Member

Comment 2 by sheriffbot@chromium.org, Sep 7 2017

Status: Archived (was: Unconfirmed)
Issue has not been modified or commented on in the last 365 days, please re-open or file a new bug if this is still an issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
►

Sign in to add a comment