इंटरनेट एक्सप्लोरर एंटी एलियासिंग घुमावदार छवि

Question

मेरे पास एक पृष्ठभूमि छवि वाला एक div है जो मैं घूर्णन कर रहा हूं। नीचे मेरी सीएसएस नियम यह बारी बारी से करने के लिए है:

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */ 
transform: rotate(3.1deg); /* firefox & IE9+ */ 
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
} 

समस्या IE में है छवि के किनारों बहुत ब्लॉक वाले और चिकनी लाइनों होने के बजाय खुरदुरे हैं और antialiased जा करने के लिए प्रकट नहीं होते। क्या किसी को इसके लिए एक फिक्स पता है? यह क्रोम में कर रहा था जब तक कि मैं इसे लागू करने के लिए फिक्स लागू नहीं करता-webkit-backface-visibility: छुपा; जो क्रोम के लिए बहुत अच्छा काम करता है, अगर कोई मौजूद है तो मुझे आईई के लिए एक समान फिक्स चाहिए।

इस मुद्दे एक HTML फ़ाइल में निम्न पेस्ट और IE में इस पर गौर को दोहराने के लिए:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div> 

Answer 1

इस मुद्दे मैं बॉक्स छाया इस्तेमाल किया जो काम करते हैं और किनारों चिकनी

Answer 2

बनाने के लिए लग रहा था दौर प्राप्त करने के लिए

सीएसएस (आईई 11, 10 और 9) के साथ मजबूर होने वाली ऊंचाई और चौड़ाई होने पर एंटी-एलियासिंग बड़ी छवियों पर काम नहीं करते हैं। मैंने कुछ (बहुत) अनुमानित परीक्षण किए हैं और मैं 1000px के तहत एंटी-एलियासिंग कार्यों को घटाता हूं।

मैं अभी भी इस मुद्दे के लिए एक आधिकारिक स्रोत की तलाश में हूं।

Answer 3

@ geoffs3310, मुझे आपका दर्द महसूस होता है।

मुझे पता चला है कि यह अभी भी आईई 11 के साथ एक मुद्दा है, और कुछ अन्य ब्राउज़र्स (आईपैड पर सफारी और क्रोम पर और सैमसंग गैलेक्सी टैब ए पर डिफ़ॉल्ट ब्राउज़र)। इस के आसपास काम करने के लिए मैंने पृष्ठभूमि-छवि वाले तत्व पर एक अंधेरे पृष्ठभूमि-रंग को फटकारा। मुझे नहीं पता क्यों, लेकिन ऐसा लगता है कि यह चाल है, उदा।

background-color: black; 

और बाकी मामले किसी में इस पोस्ट में लिखा है, मुझे आगे कुछ अन्य फिक्स मैं सामग्री को बढ़ा से उत्पन्न होने वाली विभिन्न मुद्दों से निपटने में पाया डाल करने के लिए अनुमति देते हैं। नोट, ये सभी परिवर्तित कंटेनर तत्व पर लागू होते हैं।

को समाप्त करता है के बाद तिरछा रोटेशन लागू होते हैं (kudos) jagginess बटन मिलती है:

transform-style: preserve-3d; 

धुँधली हटा दें जहां <canvas> इस्तेमाल किया गया है (kudos to Zoltan)। ध्यान दें, अगर वहाँ तत्व पर अन्य रूपांतरण कर रहे हैं बल्कि आशुलिपि से अलग पंक्ति में उन्हें घोषित (स्मृति से एक ऐसी ही सफारी समस्या के समाधान के लिए गया था):

transform: perspective(0); 

और एक और ठीक-हालांकि मेरे प्रलेखन का अभाव है यह क्या ठीक करता है , मुझे लगता है कि यह आईई-प्रयास में जंक या धुंधली सामग्री के साथ करना था:

outline: 1px solid transparent;