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

江枫思渺然 提交于 2020-02-05 10:14:44

问题


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..



来源:https://stackoverflow.com/questions/17219769/tests-for-preserve-3d-are-not-working-on-android-via-browserstack

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!