Android 2.3 ब्राउज़र कुछ CSS3 के 2 डी Transforms

Question

मैं मुसीबत डिफ़ॉल्ट वेबकिट इंजन का उपयोग करता है कि किसी भी ब्राउज़र के साथ एंड्रॉयड 2.3 में काम करने के लिए हो रही CSS3 के 2 डी Transforms (आ रही प्रस्तुत करने में विफल जैसे डिफ़ॉल्ट ब्राउज़र, डॉल्फिन HD, अमेज़न Kindle Fire सिल्क ब्राउज़र, आदि)। एंड्रॉइड 2.3 वेबकिट इंजन 2 डी ट्रांसफॉर्म का समर्थन करता है और मैं 2 डी ट्रांसफॉर्म के साथ कुछ साइट्स को सही ढंग से प्रस्तुत करने में सक्षम हूं, बस मेरी साइट नहीं!

किसी को भी जो कारण हो सकता है 2 डी के साथ कोई विरोध बदल देती है Android 2.3 में किसी भी मुद्दे पता है? वैकल्पिक रूप से, एंड्रॉइड 2.3 वेबकिट रेंडरिंग इंजन का उपयोग कर ब्राउज़र के लिए सीएसएस को लक्षित करने का कोई अच्छा तरीका है? जबकि मैं Modernizr का उपयोग कर रहा हूं, इस संदर्भ में यह काम नहीं करता है क्योंकि एंड्रॉइड 2.3 ब्राउज़र 2 डी ट्रांसफॉर्म के लिए सकारात्मक परीक्षण करते हैं। http://StevenGerner.com:

यहाँ मेरी साइट है। सामने वाले पृष्ठ पर, मैं दो तत्व -90deg (साइट शीर्षक और एक एच 2 तत्व) घूर्णन कर रहा हूं और न ही एंड्रॉइड 2.3 ब्राउज़र पर घुमाएगा। मैंने अन्य सीएसएस ट्रांसफॉर्म की भी कोशिश की है, लेकिन कुछ भी बदलना प्रतीत नहीं होता है। यदि मैं पूरे पृष्ठ को केवल मूलभूत रूप से नीचे फिसलता हूं, तो ट्रांसफॉर्म बेकार ढंग से काम करता है, इसलिए शायद मेरी साइट पर कुछ अन्य संघर्ष हो, मैं बस यह नहीं समझ सकता कि क्या! यहां रूपांतरणों के लिए विशिष्ट सीएसएस है:

//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%; 
} 

यह समस्या एंड्रॉइड 2.2 पर भी लागू हो सकती है; हालांकि, मेरे पास वर्तमान में परीक्षण करने के लिए कोई 2.2 डिवाइस नहीं है।

मैं वास्तव में कोई विचार, सुझाव और सलाह की सराहना करते हैं! यह मुझे पागल कर देता है!

Answer 1

नोट्स

Internet Explorer 5.5 या बाद में एक मालिकाना मैट्रिक्स फ़िल्टर जो एक समान प्रभाव को प्राप्त करने के लिए इस्तेमाल किया जा सकता है समर्थन करता है।

गेको 14.0 ने skew() के लिए प्रयोगात्मक समर्थन हटा दिया, लेकिन यह संगतता कारणों से गेको 15.0 में पुन: प्रस्तुत किया गया था। चूंकि यह गैर मानक है और भविष्य में इसे हटा दिया जाएगा, इसका उपयोग न करें।

एंड्रॉइड 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