909166 - Poor performance changing css matrix3d transform properties programmatically

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Doug Gale]

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

[Loic]

(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?
https://support.mozilla.org/en-US/kb/forum-response-disable-hardware-acceleration

In addition, try with a fresh profile:
https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles

Comment 2

[Doug Gale]

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:

https://www.dropbox.com/s/akdhwqg8935p4ks/jerkyff.flv

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/

Comment 3

[Loic]

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

Comment 4

[Cork]

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

[Loic]

Hum, bug 740200 hasn't landed, no?

Comment 6

[Cork]

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

Comment 7

[trusktr]

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

[trusktr]

I'm in Mac OS X Yosemite on a MacBook Pro.

Comment 9

[Gregory Pappas [:gregp]]

Both test cases in comment 0 perform well now.