css – Animated Text is Rendered Invisible Except in Firefox


Animated text is rendered transparent rather than displaying the background gradient, except in Firefox, which properly shows flashing characters with the background gradient clip.

When viewed in Firefox the text flashes as expected. When viewed in Chromium and Vivaldi the text is rendered transparent and invisible. The keyframes animation is still happening in these browsers, but invisibly.

Using pure CSS, how may I rework this code so that the correct blinking-block behavior as seen in Firefox will be replicated in other browsers?

<!DOCTYPE html>
<head>

<meta charset="UTF-8">
<meta name="description" content="Testing @keyframes with background gradient text clip.">
<meta name="keywords" content="Pure CSS3, @keyframes, joy, rage, schadenborken">
<meta name="author" content="SWYgdGhpcyBpcyBhdXRob3JzaGlwOiBkb29t">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Borked Blinkenlights</title>

<!--
This works perfectly in Firefox. In Chromium and Vivaldi the keyframe animation
causes the background-masked text to disappear. I have tried by giving the spans
alternating class names with the same result. I have tried using /div/ and /pre/
tags with the same result--instead of fading and flashing as in Firefox the
animated text is rendered transparent and does not take the mask of the gradient
background.
-->

</head>

<body>

This row works correctly in Firefox with every 2nd span flashing. In the other
browsers every 2nd span completely disappears.
<br/><br/>
<div class="flashy">
    <!-- whether using div, span, or pre tags, effect is same -->
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
</div>

<br/><br/>
Without the keyframes animation all spans are displayed with proper gradient in
all browsers tested.
<br/><br/>
<div class="notsomuch">
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
    <span>██</span><span>██</span><span>██</span><span>██</span>
</div>

</body>

<style>

body {
background: #000;
color: #999;
font-family: Roboto, "Open Sans", "Noto Sans";
font-size: 1.5rem;
}

.flashy, .notsomuch {
display: inline;
font-family: Monospace;
font-size: 1rem;
background-image: linear-gradient(to right, green, blue, indigo);
background-size: auto;
color: transparent;
background-clip: text;
}

.flashy span:nth-child(2n) {
animation: flash 1s linear infinite;
}

@keyframes flash {
0%{opacity: 0}
100%{opacity: 1}
}

</style>
</html>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here