Search code examples
javascriptcssasp.net-mvc-4gpumozilla

Detect if browser uses GPU accelerated graphics for render


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 completely yet.
  2. Even if I trick for example Chrome in using GPU for translate3d() and translateZ() layer rendering, on computers 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?

Solution

  • The main issue at the time was that all of the PNG's on the screen had to recalculated and recompiled 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 recompile 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 completely 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.