How to detect CSS translate3d without the webkit context? - css

Question

To detect if a browser support translate3d we can use (WebKitCSSMatrix in window && m11 in new WebKitCSSMatrix())
but now that firefox support translate3d how to have a correct detection of it?
The idea would be to find a solution without using Modernizr.

Answer 1

I needed something similar. I wanted to test if a browser supported translate3d without using a library. I didn't find any good generic test that wasn't webkit specific. So after much experimentation, I came up with the following test. I first create a test element, assign a transform function to it, then see if the element retained the transform function.
function Has3DSupport()
{
var sTranslate3D = "translate3d(0px, 0px, 0px)";
var eTemp = document.createElement("div");
eTemp.style.cssText = " -moz-transform:" + sTranslate3D +
"; -ms-transform:" + sTranslate3D +
"; -o-transform:" + sTranslate3D +
"; -webkit-transform:" + sTranslate3D +
"; transform:" + sTranslate3D;
var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
var asSupport = eTemp.style.cssText.match(rxTranslate);
var bHasSupport = (asSupport !== null && asSupport.length == 1);
return bHasSupport;
} // Has3DSupport
The function is plenty fast for my needs: < 50 microseconds in desktop browsers, < 500 microseconds in mobile browsers.
Hope this helps.

Answer 2

Another option who works like a charm for me:
function has3d() {
var el = document.createElement('p'),
has3d,
transforms = {
'WebkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'MSTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'Transform':'transform'
};
// Add it to the body to get the computed style.
document.body.insertBefore(el, null);
for (var t in transforms) {
if (el.style[t] !== undefined) {
el.style[t] = "translate3d(1px,1px,1px)";
has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
}