Although I parsed my CSS code with Autoprefixer (last 15 browser versions, Safari 13 included) this CSS animation doesn't work properly in Safari 14. First: The CSS animation plays not fluently. The single rows are flickering. Second: The blue-to-transparent-gradient turns to black at the end instead of transparent. Has anyone an idea why Safari 14 has this animation issue and this gradient color issue? Chrome (on Windows and macOS), Edge and Firefox play this animation perfectly fine. (Code below works in JSFiddle as is)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wipe Text Animation</title>
<style>
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 15 version
*/
div {
margin-bottom: -200px;
}
.row-one,
.row-two,
.row-four {
display: inline-block;
font: 500 124px Roboto, sans-serif;
background: -webkit-gradient(linear, left top, right top, color-stop(75%, #333), to(transparent)) no-repeat;
background: -o-linear-gradient(left, #333 75%, transparent 100%) no-repeat;
background: linear-gradient(90deg, #333 75%, transparent 100%) no-repeat;
background-size: 150% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.row-three {
display: inline-block;
font: 500 124px Roboto, sans-serif;
background: -webkit-gradient(linear, left top, right top, color-stop(75%, DodgerBlue), to(transparent)) no-repeat;
background: -o-linear-gradient(left, DodgerBlue 75%, transparent 100%) no-repeat;
background: linear-gradient(90deg, DodgerBlue 75%, transparent 100%) no-repeat;
background-size: 150% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.row-one {
-webkit-animation: row-one 800ms linear 1;
animation: row-one 800ms linear 1;
}
@-webkit-keyframes row-one {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
@keyframes row-one {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
.row-two {
-webkit-animation: row-two-opacity 400ms linear 1, row-two 800ms linear 350ms 1;
animation: row-two-opacity 400ms linear 1, row-two 800ms linear 350ms 1;
}
@-webkit-keyframes row-two-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes row-two-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes row-two {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
@keyframes row-two {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
.row-three {
-webkit-animation: row-three-opacity 800ms linear 1, row-three 800ms linear 750ms 1;
animation: row-three-opacity 800ms linear 1, row-three 800ms linear 750ms 1;
}
@-webkit-keyframes row-three-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes row-three-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes row-three {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
@keyframes row-three {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
.row-four {
-webkit-animation: row-four-opacity 1200ms linear 1, row-four 800ms linear 1150ms 1;
animation: row-four-opacity 1200ms linear 1, row-four 800ms linear 1150ms 1;
}
@-webkit-keyframes row-four-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes row-four-opacity {
0% {
opacity: 0;
}
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes row-four {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
@keyframes row-four {
0% {
background-size: 0 100%;
}
100% {
background-size: 150% 100%;
}
}
</style>
</head>
<body>
<div>
<h1 class="row-one">row one</h1>
</div>
<div>
<h1 class="row-two">row two</h1>
</div>
<div>
<h1 class="row-three">row three</h1>
</div>
<div>
<h1 class="row-four">row four</h1>
</div>
</body>
</html>
First: The animation should play fluently in Safari 14. Second: The blue-to-transparent-gradient should work exactly like the black-to-transparent-gradient.
