Question

根据caniuse.com，Android应该完全支持自3.0版以来的css 3d转换。当我运行下面的一个测试时（例如在Android 4.1，Samsng Galaxy上），它们返回true。但是，当我查看使用3d变换和保留-3d的页面时，它不起作用。例如：

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

测试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));

测试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);
});

现在我不知道问题是什么。测试不起作用吗？ Android 4.1不支持“preserve-3d”吗？或者是其他错误？

Answer 1

您遇到的是模拟器中的缺陷;您的测试用例在运行Android 4.0.4和4.1.2的真实设备上运行良好。 Android模拟器GPU采用软件模拟，无法实现所有必需的3D功能，这就是即使渲染错误，功能测试也能成功的原因。（浏览器支持它们，但基础GPU模拟不支持。）

Answer 2

如果您使用的是内置浏览器，请检查您使用的设备是否启用了gpu，或者拥有gpu？

因为3d Transform完全依赖于浏览器+硬件。

它使用硬件资源（图形处理单元），因此如果设备没有GPU或禁用GPU，它将不会渲染任何3D效果..

请检查此部分，如果可能，请回复..

我希望这样做..

“preserve-3d”测试在Android上无效（通过Browserstack）？

2 个答案: