Klatki kluczowe animacji klocków CSS działają w przeglądarce Chrome, ale nie Safari iOS.

Question

Każdy pomysł, dlaczego to działa w przeglądarce Chrome, ale nie Safari?

http://jsfiddle.net/tTxMV/

CSS:

@-webkit-keyframes glow { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
    } 
} 
.glow:after { 
    -webkit-animation-name:    glow; 
    -webkit-animation-duration:   1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    background: rgba(255,255,255,0.5); 
    border: 1px solid rgba(255,255,255,0.5); 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    right: -1px; 
    bottom: -1px; 
    content: ""; 
    border-radius: 3px; 
    opacity: 0; 
} 

#btn { 
    background: red; 
    text-align: center; 
    font-size: 100px; 
    color: white; 
    line-height: 100px; 
} 

HTML:

<div id="btn" class="glow"> 
    Start 
</div> 

Answer 1

Cóż, to nie naprawdę, że iOS nie obsługuje animacje na pseudo-elementów, to był więcej bug z WebKit. One solved it in January, a dzięki szybkim aktualizacjom Chrome działa teraz w Chrome, ale nie w Safari, ani w wersji mobilnej ani komputerowej.

Wykonaj animację całego elementu (#btn) zamiast pseudoelementu.

.glow:after { 
    background: rgba(255,255,255,0.5); 
    border: 1px solid rgba(255,255,255,0.5); 
    position: absolute; 
    top: -1px; 
    left: -1px; 
    right: -1px; 
    bottom: -1px; 
    content: ""; 
    border-radius: 3px; 
} 

#btn { 
    -webkit-animation-name:    glow; 
    -webkit-animation-duration:   1s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    background: red; 
    text-align: center; 
    font-size: 100px; 
    color: white; 
    line-height: 100px; 
    opacity: 0; 
} 

http://jsfiddle.net/tTxMV/2/

Answer 2

iOS nie obsługuje animacje na pseudo-klas.

Błąd został naprawiony w Webkit w dniu 2 stycznia 2013 roku (http://trac.webkit.org/changeset/138632), więc możemy się spodziewać, że to zadziała w iOS 7 i na.

Na razie, nie może korzystać z animacji na elemencie bezpośrednio (czyli zamiana .glow:after dla .glow i zmieniać je za animację RGBA zamiast krycie)?