New issue
Advanced search Search tips

Issue 598679 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 592803
Owner: ----
Closed: Mar 2016
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Javascript execution is affecting css animations for elements that have inline-block

Reported by christom...@gmail.com, Mar 29 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Steps to reproduce the problem:
1. Apply display:inline-block to an element
2. Try to animate transform:scale()
3. Execute some heavy javascript.
4. See that the animation freezes

What is the expected behavior?
The animation should not freeze

What went wrong?
the animation is freezing

Did this work before? N/A 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 21.0 r0

Example of the bug
http://codepen.io/chchrist/pen/qbVdQK
 
Components: -Blink Blink>Scheduling Blink>Animation
I don't think there is anything here. The app is doing a requestAnimationFrame to do the translate; and then they schedule 2000 ms of work.

Perhaps it isn't clear that a janky js blocks animation frames to the web author.
Components: -Blink>Scheduling
Mergedinto: 592803
Status: Duplicate (was: Unconfirmed)
Hello, 

The problem is not with the canvas animation in the example. Of course heavy JavaScript computation will cause janky animation. The problem is with the css animation. The dom elements that have display:inline-block will stop animating the ones that are only float will continue animating properly. I'll prepare a simpler test to make this clear. 
Ah, I just saw that this is a duplicate. Good to know that it is fixed. 

Sign in to add a comment