So I'm building large size site, which uses css3 transitions for animations (I'm using jaquery.transit to manipulate element transitions and their css styles). And I stumbled upon 2 problems:

1. FF (latest update) doesn't use GPU for translate3d() layer rendering, maybe I'm wrong and mozilla doesn't use GPU accelerated graphics at all. I really don't understand that pletely yet.
2. Even if I trick for example Chrome in using GPU for translate3d() and translateZ() layer rendering, on puters with bad GPU or with no GPU those graphics are so terrible you sometimes can't even see middle of transition just start and end.

Questions:

1. What do I do to improve FPS for transitioning elements, e.g. I have 3200x3200 div rotating and scaling and translating in x,y axis at same time, with approx. 5-20 elements displayed on that div's surface?
2. Maybe there is a way I can detect if browser has enough GPU support to know if I need to redirect to simpler version of site or not?

So I'm building large size site, which uses css3 transitions for animations (I'm using jaquery.transit to manipulate element transitions and their css styles). And I stumbled upon 2 problems:

1. FF (latest update) doesn't use GPU for translate3d() layer rendering, maybe I'm wrong and mozilla doesn't use GPU accelerated graphics at all. I really don't understand that pletely yet.
2. Even if I trick for example Chrome in using GPU for translate3d() and translateZ() layer rendering, on puters with bad GPU or with no GPU those graphics are so terrible you sometimes can't even see middle of transition just start and end.

Questions:

1. What do I do to improve FPS for transitioning elements, e.g. I have 3200x3200 div rotating and scaling and translating in x,y axis at same time, with approx. 5-20 elements displayed on that div's surface?
2. Maybe there is a way I can detect if browser has enough GPU support to know if I need to redirect to simpler version of site or not?

• javascript
• css
• asp-mvc-4
• gpu
• mozilla

Share Improve this question Follow edited May 9, 2016 at 14:20 skmasq asked Jan 28, 2013 at 17:57 skmasqskmasq 4,52177 gold badges4444 silver badges7777 bronze badges 6

• 1 A 3200x3200px element is massive. I imagine most GPUs would struggle to throw that around in memory. Can you try the same effect on something smaller and see if you get the same performance problems? – Olly Hodgson Commented Jan 28, 2013 at 18:09
• @OllyHodgson well you see, I need that big territory. You see my territory is 3200x3200 big, but my viewport is 1024x750. I know games render only view area, but I have no clue how to do that or wetter it's even possible. And to answer your question, with smaller and lesser object it renders smoothly. – skmasq Commented Jan 28, 2013 at 18:15
• Can you keep the div smaller and scale it as needed with CSS media queries? – Mooseman Commented Jan 28, 2013 at 19:02
• @Mooseman how do you suggest I do that? – skmasq Commented Feb 2, 2013 at 15:49
• See w3/TR/css3-mediaqueries for using Media Queries. Just beware of browser patibility (caniuse./#feat=css-mediaqueries) – Mooseman Commented Feb 2, 2013 at 18:54

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

The main issue at the time was that all of the PNG's on the screen had to recalculated and repiled in the browser.

There were several things I had to do to to maximize performance:

1. Always have predefined width and height attributes on images. What this does is let's the browser know what size the picture should be and when used together with scale() it won't recalculate and repile those images. These things were very expensive. So basically if nothing else than scale() modified image size, everything was perfect and animations were awesome.
2. Wherever possible avoid using visibility property, it literally acts like opacity: 0 keeping the element in the layout making layout recalculation much longer. Always where possible use display: none, this will pletely eliminate element from the layout calculations. This was a major pitfall, because I had to re-think the UI to exclude visibility and I had to minimize used DOM node count.

Overall it was a huge adventure and big experience, hope this question/answer helps someone.

Because WebGL uses GPU, the amazing Modernizr project permits to check that for webGL supported browsers: http://modernizr./news/

Check Modernizr.webgl under http://modernizr./docs/