Android 2.3 브라우저가 일부 CSS3 2D 변환을 렌더링하지 못함

Question

기본 웹킷 엔진 (예 : 기본 브라우저, Dolphin HD, Amazon Kindle Fire Silk 브라우저 등)을 사용하는 모든 브라우저에서 Android 2.3에서 작동하도록 CSS3 2D 변환을 얻는 데 문제가 있습니다. 기타). 안드로이드 2.3 웹킷 엔진은 2D 변환을 지원하며 2D 변환을 사용하여 사이트를 올바르게 렌더링 할 수있게되었습니다. 내 사이트가 아닌 것입니다!

2D 변환과 충돌 할 수있는 Android 2.3의 문제를 아는 사람이 있습니까? 또는 Android 2.3 웹킷 렌더링 엔진을 사용하는 브라우저에서 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

노트

인터넷 익스플로러 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