Detecting 'transform: translate3d' support

Question

Does anyone know how I would detect transform: translate3d(x,y,z) support is available?

My issue is that I want to use translate3d across b

Answer 1

tl:dr - Use user agent sniffing. Here is a script for detecting CSS 3D transform support across browsers: https://github.com/zamiang/detect-css3-3D-transform

I tried most of the methods in this post, among others like Modernizer and Meny's methods but could not support browsers like Firefox while maintaining a good experience for older browsers like Safari 4&5, iOS devices and Chrome on Retina MacBook pros (they all have their quirks).

CSS3 3D transforms involve interaction between the browser and the graphics card. The browser may be able to parse the 3D declarations but may not be able to properly instruct the graphics card in how to render your page. There are many possible outcomes ranging from the page rendering with lines across it (Safari 4) to the page rendering beautifully then crashing the browser seconds later (Safari on iOS4). Any ‘feature detection’ approach would unacceptably flag these as ‘supports CSS3 3D transforms’. This is one case where ‘feature detection’ fails and user agent sniffing (and lots of testing) wins hands down.

Most feature detection assumes a 'supports' or 'does not support' binary. This is not the case with CSS3 3D Transforms - there is a 'gradient of support'.

CSS3 3D transform support can be separated into 4 levels:

1. Reliably supports 3D transforms across most machines. For example: Safari 6
2. Can parse and apply 3D transform declarations but ignores the 3D parts. For example: Chrome on a Retina MacBook Pro.
3. Can parse and apply 3D transform declarations but renders in unacceptable ways. For example: Safari 4 and Safari 4/5 on Windows show lines across the page.
4. Cannot apply 3D transform declarations in any way. For example: IE or Firefox < v10

This script will return true in scenario one and two but false for 3 and 4:

Note: new to participating in stackoverflow - please let me know if I should paste that code inline (it is a bit long)