Android 2.3浏览器无法呈现一些CSS3 2D转换

我无法使用任何使用默认webkit引擎的浏览器（例如，默认浏览器，Dolphin HD，Amazon Kindle Fire Silk浏览器，等等）。 Android 2.3 webkit引擎确实支持2D转换，并且我已经能够使用2D转换的一些网站正确呈现，而不是我的网站！Android 2.3浏览器无法呈现一些CSS3 2D转换

有谁知道在Android 2.3中可能会导致与2D转换冲突的任何问题吗？或者，是否有一种好方法可以针对使用Android 2.3 Webkit渲染引擎的浏览器使用css？当我使用Modernizr时，在这种情况下，它不起作用，因为Android 2.3浏览器测试2D转换为正。我的网站：http://StevenGerner.com。在首页上，我旋转了两个元素-90度（网站标题和一个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设备要测试。

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

来源

2012-08-29 user1634149

周围一堆搞乱后，我终于想通了什么事。这个奇怪的错误来自一个自定义设置的视口。如果您为iOS和Android提供自定义视口，则必须设置“user-scalable = yes”。如果用户可伸缩设置为否，则会显示此错误。例如，''会正常工作，但是像'会显示不正确。 – user1634149

http://caniuse.com/#feat=transforms3d在这里检查 –

您还可以将'target-densitydpi = device-dpi'添加到Android设备的元视口中。 –

注

Internet Explorer 5.5或更高版本支持的专有矩阵滤光器，其可以用于实现类似的效果。

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

Android 2.3有一个错误，其中输入表单将在输入时“跳”，如果任何容器div有一个-webkit转换。

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

来源

2013-08-30 08:09:51

Android 2.3浏览器无法呈现一些CSS3 2D转换

回答

相关问题