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

Question

我在使用任何使用默认webkit引擎的浏览器(例如默认浏览器,Dolphin HD,亚马逊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变换是正面的.

这是我的网站: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 或更高版本支持专有的矩阵过滤器，可用于实现类似的效果。

Gecko 14.0 删除了对 skew() 的实验性支持，但出于兼容性原因在 Gecko 15.0 中重新引入了它。由于它是非标准的，并且将来可能会被删除，因此请勿使用它。

Android 2.3 有一个错误，如果任何容器 div 具有 -webkit-transform，则输入表单在键入时会“跳转”。

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

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