1162004 - stacked css transforme element with css transition slowed down the browser

Status: NEW

(Firefox :: General, defect)

Description

[mmis1000]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

Demo : http://jsbin.com/wasidu/3/

1. create a html
2. make a stack of divs <div class="out"> <div class="a"> <div class="a"> .... </div> </div> </div>
3. add css transform & transition to div 
.a {
  transform : translate(-1px,-1px) scale(1) rotate(0deg);
  transition : all 1s;
}
4. change the transform when it's outer wrapper was hovered
.out:hover .a {
  transform : translate(-1px,-1px) scale(1.44) rotate(45deg);
}
5. hover the mouse on it (both on desktop and phone)


Actual results:

The firefox slowed down seriously the first time the mouse hovers on it.
In some reports, even crash directly.
The firefox crashs both on my phone and computer.
But some other say it just very slow, not crash.


Expected results:

The animate should runs smoothly without any problem.
Just like run it in google chrome

Comment 1

[Justin [:JW_SoftvisionQA]]

I can reproduce this bug. The browser slows down for me when the mouse hovers on it and when I close the tab. I tested this in Firefox 43.0 and Nightly 46.0a1 on Win 7 and Win 8.1.

Name 	Firefox
Version 	43.0
Build ID 	20151208100201
User Agent 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0

Comment 2

[mmis1000]

Attachment: Screenshot_20201105-010525.png

looks like this is still an issue on the phone.
And more worse, it renders the animation incorrectly now.
The translate of (-1px, -1px) somehow not got applied on the element during animation, results in a bad visual effects.