除了 Firefox 之外，动画文本呈现为不可见

Question

动画文本呈现为透明而不是显示背景渐变，Firefox 除外，它使用背景渐变剪辑正确显示闪烁的字符。

在 Firefox 中查看时，文本按预期闪烁。 在 Chromium 和 Vivaldi 中查看时，文本呈现为透明且不可见。 关键帧 animation 仍在这些浏览器中发生，但不可见。

使用纯 CSS，我该如何修改此代码，以便在其他浏览器中复制 Firefox 中看到的正确闪烁块行为？

<!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>