इंटरनेट एक्सप्लोरर

Question

में सीमा-त्रिज्या के साथ Wobbly सीएसएस एनीमेशन इंटरनेट एक्सप्लोरर में यह एनीमेशन wobble प्रतीत होता है। मैं this question का जवाब पढ़ रहा था और उन्होंने इसे ठीक किया जैसे कि इसे ठीक करना संभव है।

मैं वास्तव में छवि का उपयोग नहीं कर सकता क्योंकि सीमा त्रिज्या निरंतर नहीं है, और मैं एनिमेटेड gif का उपयोग नहीं करना चाहूंगा।

मैं समझता हूं कि 'wobble' बहुत अच्छा वर्णन नहीं है लेकिन मैं इसका वर्णन करने के लिए किसी अन्य शब्द के बारे में नहीं सोच सकता। मैंने ओपेरा/सफारी के साथ इसका परीक्षण नहीं किया है, इसलिए यदि आपके पास इनमें से कोई भी है तो मैं जानना चाहूंगा कि क्या वे सही तरीके से प्रदर्शित होते हैं या समस्या भी होती है। क्रोम/फ़ायरफ़ॉक्स में निम्नलिखित स्निपेट चलाने के लिए और इंटरनेट एक्सप्लोरर में स्निपेट की तुलना करें:

@keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-webkit-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-moz-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-ms-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
@-o-keyframes spin{ 
 
\t 0% {transform:rotateZ(0deg);} 
 
\t 50% {transform:rotateZ(360deg);border-radius:60%;} 
 
\t 100%{transform:rotateZ(720deg);} 
 
} 
 
#spinme{ 
 
\t display:inline-block; 
 
\t position:relative; 
 
\t left:0; 
 
\t top:0; 
 
\t margin:0.2rem; 
 
\t width:0.8rem; 
 
\t height:0.8rem; 
 
\t border:0.2rem solid black; 
 
\t border-radius:0; 
 
\t outline: 1px solid transparent; /* require to remove jagged edges in firefox */ 
 
\t transform:rotateZ(0deg); 
 
\t animation: spin infinite 4s; 
 
\t -webkit-animation: spin infinite 4s; 
 
\t -moz-animation: spin infinite 4s; 
 
\t -ms-animation: spin infinite 4s; 
 
\t -o-animation: spin infinite 4s; 
 
} 
 
#spinme:nth-child(2){animation-delay:0.06s} 
 
#spinme:nth-child(3){animation-delay:0.12s} 
 
#spinme:nth-child(4){animation-delay:0.18s}

<div id="spinme"></div> 
 
<div id="spinme"></div> 
 
<div id="spinme"></div> 
 
<div id="spinme"></div>

तेज धार ठीक करने के लिए outline हैक this answer से आया है।

---

एक साइड सवाल के रूप में, और जिज्ञासा से, उन उपसर्गों में से कौन सा वास्तव में आवश्यक है? मैं पुराने ब्राउज़र में काम करने के लिए compatibility requirements पर देख रहा था, लेकिन यह केवल -webkit उपसर्ग का उल्लेख करता है: -moz, -ms या -o उपसर्ग किसी भी ब्राउज़र संस्करण के लिए आवश्यक नहीं लगता है।

मैंने अभी भी shouldiprefix की जांच की है और वे कैनियस के साथ सहमत हैं, लेकिन दिए गए नामों के समान ही मैंने सोचा कि एक ही समुदाय/कंपनी दोनों वेबसाइटों को चला सकती है। क्या मुझे बस अन्य उपसर्गों को हटा देना चाहिए?

Answer 1

ऐसा लगता है कि यह ऑब्जेक्ट के किनारे के साथ हस्तक्षेप करने वाली पारदर्शी रूपरेखा है। रूपरेखा हमेशा एक वर्ग है (जैसा कि आप उदाहरण के लिए outline: 1px solid blue; का उपयोग कर देख सकते हैं)। मैं केवल यह मान सकता हूं कि एक इंटरप्लाटेड गोलाकार आकार पर 1px पारदर्शी रूपरेखा रूपरेखा का उपयोग प्रतिपादन समस्या का कारण बनता है।

outline:1px solid rgba(255, 255, 255, 0);याoutline:0 solid transparent; फिक्स एज और IE11 मेरे लिए साथ outline:1px solid transparent; की जगह। मेरे पास फ़ायरफ़ॉक्स नहीं है इसलिए मैं परीक्षण नहीं कर सकता अगर यह अभी भी जंजीर किनारों को हटा देता है।

@keyframes spin{ 
 
    0% {transform:rotateZ(0deg);} 
 
    50% {transform:rotateZ(360deg);border-radius:60%;} 
 
    100%{transform:rotateZ(720deg);} 
 
} 
 
@-webkit-keyframes spin{ 
 
    0% {transform:rotateZ(0deg);} 
 
    50% {transform:rotateZ(360deg);border-radius:60%;} 
 
    100%{transform:rotateZ(720deg);} 
 
} 
 
@-moz-keyframes spin{ 
 
    0% {transform:rotateZ(0deg);} 
 
    50% {transform:rotateZ(360deg);border-radius:60%;} 
 
    100%{transform:rotateZ(720deg);} 
 
} 
 
@-ms-keyframes spin{ 
 
    0% {transform:rotateZ(0deg);} 
 
    50% {transform:rotateZ(360deg);border-radius:60%;} 
 
    100%{transform:rotateZ(720deg);} 
 
} 
 
@-o-keyframes spin{ 
 
    0% {transform:rotateZ(0deg);} 
 
    50% {transform:rotateZ(360deg);border-radius:60%;} 
 
    100%{transform:rotateZ(720deg);} 
 
} 
 
#spinme{ 
 
    display:inline-block; 
 
    margin:0.2rem; 
 
    width:0.8rem; 
 
    height:0.8rem; 
 
    border:0.2rem solid black; 
 
    border-radius:0; 
 
    outline:0 solid transparent; 
 
    transform:rotateZ(0deg); 
 
    animation: spin infinite 4s; 
 
    -webkit-animation: spin infinite 4s; 
 
    -moz-animation: spin infinite 4s; 
 
    -ms-animation: spin infinite 4s; 
 
    -o-animation: spin infinite 4s; 
 
}

<div id="spinme"></div>

विक्रेता उपसर्ग भाग के लिए के रूप में, जब मैं स्थानीय स्तर पर परीक्षण किया गया था मुझे लगता है कि IE11 और एज दोनों का समर्थन उपसर्ग कम animation: spin infinite 4s; लेकिन IE11 अभी भी -ms-animation का समर्थन करता है। एज -ms-animation का समर्थन नहीं करता है लेकिन -webkit-animation का समर्थन करता है - Will Microsoft Edge use prefixes like -webkit- or -ms-? देखें। तो अपने लक्षित ब्राउज़र ऑडियंस के आधार पर आप अगर चाहें तो बहिष्कृत गुणों को छोड़ना चुन सकते हैं, हालांकि मैं उन्हें सभी के लिए छोड़ दूंगा ताकि पुराने ब्राउज़र को बाहर नहीं रखा जा सके।

नोट: मैं देखा था एज निरीक्षक में टॉगल सीएसएस गुण से पता चला कि गणना की border-[top|bottom]-[left|right]-radius गुण कभी कभी एक प्रतिशत है और कभी कभी एक कठिन px मूल्य थे। मुझे यकीन नहीं है कि यह समस्या से संबंधित है या प्रासंगिक है।

Answer 2

आईई इंटरनेट एक्सप्लोरर बग को ठीक करने के लिए जहां घूर्णन चीजें एक घुमाव का कारण बनती हैं, इसे आजमाएं।ट्रांसफॉर्म-उत्पत्ति सभी आयामों (x, y और z) में चौड़ाई तक आधा होना चाहिए।

transform-origin: 20px 20px 20px;