Question

我在使用任何使用默认webkit引擎的浏览器（例如默认浏览器，Dolphin HD，Amazon Kindle Fire Silk浏览器等）中使用CSS3 2D Transforms在Android 2.3中工作时遇到了麻烦。 Android 2.3 webkit引擎确实支持2D变换，我已经能够让一些2D变换的网站正确渲染，而不是我的网站！

有没有人知道Android 2.3中可能导致与2D转换冲突的任何问题？或者，有没有一种方法可以使用Android 2.3 webkit渲染引擎为浏览器定位css？当我使用Modernizr时，在这种情况下它不起作用，因为Android 2.3浏览器测试2D变换是正面的。 / p>

这是我的网站：http://StevenGerner.com。在首页上，我正在旋转两个元素-90deg（网站标题和一个h2元素），并且都不会在Android 2.3浏览器上旋转。我甚至尝试过其他的css变换，但似乎没有任何改变。如果我将整个页面剥离到基本，那么转换工作完美无缺，所以我的网站上可能还有其他冲突，我只是无法弄清楚是什么！这是特定于变换的CSS：

//Applied to the h2 element which says 'howdy' at the top of the page
    #about-front h2 {
        display: inline-block;
        float: left;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 170% 170%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 170% 170%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 170% 170%;
        -o-transform: rotate(-90deg);
        -o-transform-origin: 170% 170%;
        transform: rotate(-90deg);
        transform-origin: 170% 170%;
        width: 1em;
        text-shadow: -1px 0 #777, 0 2px #333, 2px 0 #333, 0 -1px #777;
    }

//Applied to the site title with a media query between 500px and 750px
    div#site_name {
        display: block;
        line-height: 0.85em;
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4)"\9;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 160% 130%;
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 160% 130%;
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        -o-transform: rotate(-90deg);
        -ms-transform-origin: 160% 130%;
        transform: rotate(-90deg);
        transform-origin: 160% 130%;
}

该问题也可能适用于Android 2.2;但是，我目前没有任何2.2设备可供测试。

我真的很感激任何想法，建议和建议！这让我疯了！

Answer 1

注释

Internet Explorer 5.5或更高版本支持专有的Matrix Filter   这可以用来达到类似的效果。

Gecko 14.0删除了对skew（）的实验支持，但确实如此   由于兼容性原因，在Gecko 15.0中重新引入。原样   非标准的，将来可能会被删除，不要使用它。

Android 2.3有一个错误，输入表单会跳过＆＃34;跳转＆＃34;打字时，如果   任何容器div都有-webkit-transform。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

更多：https://code.google.com/p/android/issues/detail?id=12451

Android 2.3浏览器无法渲染一些CSS3 2D变换

1 个答案: