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

Steps to reproduce the problem:
1. Visit http://jsbin.com/vuseqav/4/edit?html,css,output
2. In the "Output" panel, scroll down a bit until "mouse-over me" is in the top of the screen
3. Hover on the "mouse-over me"

What is the expected behavior?
A tomato-colored square with "Animated item" appears after a scaling transition animation.

http://i.giphy.com/l2Sq1yIjVQDso4il2.gif

What went wrong?
The surrounding text jumped down (with a distance that seems related to how much we have scrolled down) a bit when the scaling animation is playing, and jumped back when after the animation ends.

http://i.giphy.com/26ufktHmzfbQfQkj6.gif

Did this work before? Yes Chrome 52

Does this work in other browsers? Yes

Chrome version: 53.0.2785.143  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 23.0 r0

* If `will-change: transform` is added ( http://jsbin.com/kokabit/1/edit?html,css,output ), the scrolling behavior becomes super wierd ( http://i.giphy.com/26uf6gRKsjbNy463e.gif ) -- texts are disappearing when scrolling. I believe it is a bug in GPU acceleration.
* There is an issue in material-design-lite that is probably related to this: https://github.com/google/material-design-lite/issues/4574#issuecomment-246600670 (starting from the 2nd comment)
* In Google Chrome Canary 56.0.2886.0 canary (64-bit) the problem does not exist anymore. However, I think there is a serious issue in the render engine that we cannot wait for a few months to be resolved.