“保存-3d”测试不能在Android上工作(通过Browserstack)

Tests for "preserve-3d" are not working on Android (via Browserstack)?

本文关键字：工作 通过 Browserstack Android -3d 保存 测试 不能      更新时间：2023-09-26

根据caniuse.com, Android应该从3.0版本开始完全支持css 3d转换。当我运行下面的一个测试时(例如在Android 4.1，三星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"吗?还是有其他问题?

您所经历的是模拟器的缺陷;您的测试用例在运行Android 4.0.4和4.1.2的真实设备上运行良好。Android模拟器GPU是在软件中模拟的，但并没有实现所有必需的3D功能，这就是为什么即使渲染错误，功能测试也能成功。(浏览器支持，但底层GPU仿真不支持)

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

作为3d变换完全依赖于浏览器和硬件。

它使用硬件资源(图形处理单元)，所以如果设备没有GPU或禁用GPU，它将不会渲染任何3d效果。

请检查这部分，如果可能的话请回复。

相关文章：