Poor performance changing css matrix3d transform properties programmatically




4 years ago
3 years ago


(Reporter: Doug Gale, Unassigned)


23 Branch

Firefox Tracking Flags

(Not tracked)




4 years ago
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36

Steps to reproduce:

http://jsfiddle.net/doug65536/aTsyS/177/ or http://jsfiddle.net/doug65536/aTsyS/ (this will be latest)

Click Rotate!

Actual results:

Horribly glitchy unusable rotation. Terrible performance.

Expected results:

I get absolutely smooth performance in chrome. I have done extensive optimizations to the code. Profiling in chrome shows less than 1% of CPU time is in my code. I have tuned most of the hot code paths by choosing the fastest of several implementations with jsperf.com. Chrome runs this at 60 fps EASY. This is baffling, because Firefox has far better javascript performance than chrome.

Comment 1

4 years ago
(In reply to Doug Gale from comment #0)
> Chrome runs this at 60 fps EASY. 

WFM, 60 fps here with FF23 on Win 7. Maybe related to HWA or specific to Linux.

Did you try to make a test with HWA disabled?

In addition, try with a fresh profile:
Component: Untriaged → Graphics
Flags: needinfo?(doug65536)
Product: Firefox → Core

Comment 2

4 years ago
Please see screencast of the issue. It is not as smooth as my actual screen, but I assure you, the chrome one is perfectly smooth. Notice the massive jitter in the firefox one:


I tried disabling hardware acceleration, and that did increase my framerate, but the massive horrible jitter is still there. It is as though there is some severe mathematical precision bug somewhere in firefox, perhaps in the "transform: matrix3d" css.

Are you getting jerky awful 60fps, or beautifully smooth 60fps when you test it? Please, try it in chrome to see what I mean.

Creating and using a new profile made no improvement with the issue.

My machine is a Core I7 990x Extreme Edition 6-core (12 hyperthreads) @ stock 3.46 GHz. My video card is a GTX 580. My display driver is version 319.49 (just updated yesterday - and this issue existed before update).

I updated the code to use requestAnimationFrame, and there was no improvement with the issue. Please see updated fiddle at http://jsfiddle.net/doug65536/aTsyS/
Flags: needinfo?(doug65536)

Comment 3

4 years ago
I got smooth 60 fps animation on Win 7 with both old or new testcases.

Comment 4

4 years ago
I can reproduce this on linux. But yes this is not a problem on windows so I suspect bug 740200 is the cause of this.

Comment 5

4 years ago
Hum, bug 740200 hasn't landed, no?

Comment 6

4 years ago
No, and by cause i mean what that bug is trying to fix.

Comment 7

3 years ago
I'm experiencing poor transform:matrix3d performance in Firefox too, but smoothness in Chrome. Compare this site in both Chrome vs Firefox:

https://trusktr.io/ (hover near the left edge of the page to open the menu, or swipe in from the left edge on mobile (with care in iOS since swiping from the left edge in Safari takes you back to the previous page))

Please put some effort into fine-tuning CSS transform:matrix3d as this is (in concept) an incredible way of making dynamic things in the web.

Comment 8

3 years ago
I'm in Mac OS X Yosemite on a MacBook Pro.
You need to log in before you can comment on or make changes to this bug.