सफारी में सीएसएस एनीमेशन बग

Question

मेरे पास देरी के साथ एक सीएसएस एनीमेशन है और मैं देरी के दौरान इसे रोकता हूं। यह फ़ायरफ़ॉक्स और क्रोम पर अपेक्षित काम करता है, "हैलो" नहीं चलता है। हालांकि सफारी पर, एनीमेशन अंतिम फ्रेम पर कूदता है। कृपया क्यों और कैसे ठीक करें?

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState = 'paused'; 
 
    }, timeout); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 2s; 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

अगर मैं 2s देरी को दूर, 4s के लिए अवधि निर्धारित है, और बदलने के साथ एक-फ़्रेम जोड़ना: कोई नहीं, मैं इस सरल उदाहरण काम कर सकते हैं। हालांकि मेरे वास्तविक मामले में कई एनिमेशन हैं जो देरी से सिंक्रनाइज़ होते हैं।

Answer 1

यह समस्या का उत्तर नहीं है। हालांकि, अगर आप एनीमेशन विलंब को हटाते हैं, तो एनीमेशन कार्यों को रोकना और पुनरारंभ करना चाहिए। ऐसा लगता है कि एनीमेशन देरी समस्या का कारण बन रही है। शायद देरी को संभालने के लिए सीएसएस पर भरोसा करने के बजाय, जावास्क्रिप्ट के साथ प्रोग्रामेटिक रूप से एनीमेशन विलंब को नियंत्रित करें।

रुक कर और एनीमेशन

function test() { 
 
    var timeout = 1000; 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState ='paused'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='paused'; 
 
    }, timeout); 
 
    setTimeout(function() { 
 
    document.getElementById('animation').style.animationPlayState='running'; 
 
    document.getElementById('animation').style.webkitAnimationPlayState ='running'; 
 
    }, timeout * 2); 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    -webkit-animation: test 2s linear; 
 
     animation: test 2s linear; 
 
} 
 

 
@-webkit-keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    -webkit-transform: translateY(100px); 
 
     transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

Answer 2

सफारी व्यवहार चल नीचे देखें केवल गाड़ी जब टाइमआउट एनिमेशन विलंब से छोटा मान पर सेट किया जाता है। तो, एक समाधान के रूप में नीचे दिखाया गया, animation-play-state के माध्यम से paused को प्रारंभिक अवस्था सेट और फिर जे एस के माध्यम से इसे नियंत्रित करने के लिए है:

function test() { 
 
    let el = document.getElementById("animation"); 
 
    let timeout = 1000; 
 
    
 
    // Get the delay. No luck with el.style.animationDelay 
 
    let delay = 
 
    window 
 
     .getComputedStyle(el) 
 
     .getPropertyValue("animation-delay") 
 
     .slice(0, -1) * 1000; 
 

 
    // Only resume and later pause when timeout is greater than animation delay 
 
    if (timeout > delay) { 
 
    el.style.animationPlayState = "running"; 
 
    setTimeout(function() { 
 
     el.style.animationPlayState = "paused"; 
 
    }, timeout); 
 
    } 
 
} 
 

 
document.addEventListener("DOMContentLoaded", test);

#animation { 
 
    animation: test 2s linear 3s; 
 
    animation-play-state: paused; /* Pause it right after you set it */ 
 
} 
 

 
@keyframes test { 
 
    to { 
 
    transform: translateY(100px); 
 
    } 
 
}

<div id="animation"> 
 
    Hello (this text should not move) 
 
</div>

यह काम कर रहा है देखने के लिए अलग टाइमआउट मानों की कोशिश करो। यह नहीं कह सकता कि यह क्यों हो रहा है। मुझे एक बग की तरह लग रहा है। ओएस एक्स एल कैपिटन 10.11.6/सफारी 11.0 (11604.1.38.1.7) पर परीक्षण किया गया।

Codepen demo