0
285
ViewsCSS Keyframe Animation Leaves Halo in WebKit
This is primarily happens on mobile Safari but can be reproduced on desktop too:
After a while of running in the background in a different tab or application, returning to this loaded animation results in square halos highlighting the individual moving characters. A refresh fixes this, but how can I make it stop happening in the first place? See attached for the issue and the full code below.
Any help would be insanely appreciated. ♡
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
html{
height:100%;
width:100%;
background:#FFF;
}
body {
height:100%;
width:100%;
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
gap:1rem;
overflow:hidden;
}
.animated-text {
font: 12.0vmin/1 "Helvetica";
letter-spacing: 0.3rem;
}
.animated-text span.letter{
display:inline-block;
}
.animated-text.tilted span.letter{
animation: 1s tilted forwards ease-in-out infinite;
}
@keyframes tilted {
0%{
transform: rotateZ(-15deg);
}
50%{
transform: rotateZ(15deg);
}
100%{
transform: rotateZ(-15deg);
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<span class="animated-text tilted">
STACK
</span>
<span class="animated-text tilted">
OVERFLOW
</span>
<!-- partial -->
<script>var animatedText = document.querySelectorAll(".animated-text");
function animate(element){
var textArray = element.innerText.split("");
element.firstChild.remove();
var elArray = textArray.map(
(letter,index)=>{
if(letter==" ") letter = ' ';
var el = document.createElement("span");
el.className = "letter";
el.innerHTML = letter;
el.style.animationDelay = index/(textArray.length)+"s";
element.appendChild(el);
return el;
}
);
element.innerHtml = elArray;
}
Array.from(animatedText).map(animate)</script>
</body>
</html>
·
Juan Pablo Isaza
Answer question