Menu
Any idea why this works in Chrome but not 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>
553
Browser Compatibility of CSS Animation on Safari 15. Note: CSS Animation is Fully Supported on Safari 15, which means that any user who'd be accessing your page through Safari 15 can see it perfectly.
Even if you've assigned a keyframes rule to an element, it still may not appear to play if you haven't set an animation-duration. By default, a CSS animation cycle is zero seconds long. To override this, add an animation-duration rule to your targeted element with a seconds value, in the same block as animation-name.
CSS Animation on Android Browser is fully supported on 4.4-103, partially supported on 2.3-3, and not supported on below 2.3 Android Browser versions. CSS Animation on Opera Mobile is fully supported on 12.1-64, partially supported on None of the versions, and not supported on 10-12 Opera Mobile versions.
Only WebKit (Safari), and not Chromium, based browsers supports the -webkit-animation media feature. No browsers support animation , without the prefix, as a media query. Use the @supports (animation) feature query instead.
Well, it's not really that iOS doesn't support animations on pseudo-elements, it was more a bug from WebKit. They solved it in January and because of Chrome's fast updates it works in Chrome now, but not so on Safari, neither mobile nor desktop version.
Make just the animation work on the entire element (#btn) instead of the pseudo-element.
.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/
187
iOS doesn't support animations on pseudo-classes.
The bug was fixed in Webkit on January 2nd 2013 (http://trac.webkit.org/changeset/138632), so we might expect this to work in iOS 7 and on.
For now, can you not use the animation on the element directly (i.e. swap .glow:after for .glow, and change it to be an rgba animation rather than opacity)?
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
