माइक्रोसॉफ्ट एज होवर बग

Question

मेरे पास माइक्रोसॉफ्ट एज में एक बग है। होवर के दौरान <div>transform: scale(1.5);transition: transform 1s; के साथ है। लेकिन जब आप कर्सर को div में ले जाते हैं, तो 1s प्रतीक्षा करें, बाहर निकलें और फिर तेजी से div पर जाएं, div का स्केल टूटा हुआ है और संक्रमण गायब हो गया है। क्या इस व्यवहार को ठीक करने का कोई तरीका है? यहां fiddle है।

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
}

<div></div>

Answer 1

इस संक्रमण समस्या किनारे पर transition-timing-function संपत्ति का उपयोग ठीक करने के लिए, इस आरंभ और समाप्ति पर यह धीमी बनाने तेजी को प्रभावित करने से समस्या का समाधान हो। इसके बाद आप एनीमेशन लंबाई के साथ transition-duration

div { 
 
    background-color: green; 
 
    transition: transform 1s; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
div:hover { 
 
    transform: scale(1.5); 
 
    transition-timing-function: ease-in-out; 
 
}

<div></div>

संपादित मूल गति के लिए इसे बनाने के लिए सेट कर सकते हैं (सेकंड में): अगर आप देखते हैं ध्यान से देखते चौड़ाई पर बदल रहा है के साथ एक गड़बड़ के कुछ प्रकार है होवर, लेकिन कुल मिलाकर संक्रमण