CSS3 2D Transforms を Android 2.3 で、デフォルトの Webkit エンジンを使用するブラウザー (デフォルトのブラウザー、Dolphin HD、Amazon Kindle Fire Silk ブラウザーなど) で動作させるのに問題があります。Android 2.3 Webkit エンジンは 2D 変換をサポートしており、2D 変換を使用していくつかのサイトを正しくレンダリングすることができましたが、私のサイトだけではありません!
2D 変換と競合する可能性のある Android 2.3 の問題を知っている人はいますか? または、Android 2.3 webkit レンダリング エンジンを使用して、ブラウザーの css をターゲットにする良い方法はありますか? 私は Modernizr を使用していますが、Android 2.3 ブラウザーのテストで 2D 変換が陽性であるため、このコンテキストでは機能しません。
これが私のサイトです: http://StevenGerner.com . フロント ページで、2 つの要素 (サイト タイトルと h2 要素) を -90 度回転させていますが、どちらも 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 デバイスはありません。
ご意見、ご提案、アドバイスをいただければ幸いです。これは私を夢中にさせています！