Tests for “preserve-3d” are not working on Android

问题:

Android is supposed to support css 3d transforms completely since version 3.0 according to caniuse.com. When I run one of the tests below (e.g. on Android 4.1, Samsng Galaxy), they return true. However, when I view a page that uses 3d transforms and preserve-3d it doesnt’t work. For example:

http://jsfiddle.net/bartaz/e3Rjz/show/

Test 1:

(function(Modernizr, win){
    Modernizr.addTest('csstransformspreserve3d', function () {

        var prop = Modernizr.prefixed('transformStyle');
        var val = 'preserve-3d';
        var computedStyle;
        if(!prop) return false;

        prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

        Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
            computedStyle = win.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
        });

        return (computedStyle === val);
    });
}(Modernizr, window));

Test 2:

Modernizr.addTest('csstransformspreserve3d', function () {

  var prop,
      val,
      cssText,
      ret;

  prop = 'transform-style';
  if ('webkitTransformStyle' in document.documentElement.style) {
    prop = '-webkit-' + prop;
  }
  val = 'preserve-3d';
  cssText = '#modernizr { ' + prop + ': ' + val + '; }';

  Modernizr.testStyles(cssText, function (el, rule) {
    ret = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
  });

  return (ret === val);
});

Now I don’t know what the problem is. Do the tests not work? Does Android 4.1 not support "preserve-3d"? Or is something else wrong?

回答1:

What you are experiencing is a defect in the emulator; your test case works fine on a real device running Android 4.0.4 and 4.1.2. The Android emulator GPU is emulated in software which does not implement all of the required 3D functionality, which is why the feature tests succeed even though the rendering is wrong. (The browser supports them, but the underlying GPU emulation does not.)

回答2:

If you are using the inbuilt browser, please check the device you are using have the gpu enabled, or have gpu?

as the 3d Transform is totally dependent on browser + hardware.

It uses hardware resources(Graphical Processing Unit) so if the device do not have GPU or disable GPU it will not render any of 3d effects..

Please check this part and if possible reply..

I hope this will do..