Search code examples
cssfirefoxmarkdownwebkithugo

Why does rainbow text with KaTeX only work on firefox?

<style>
    #a-r-t {
        background-image: repeating-linear-gradient(to right, red, orange, yellow, lime, cyan, violet);
        display: inline-block;
        background-size: 800% 800%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: rainbow 8s ease infinite;
    }
    @keyframes rainbow { 
        0%{background-position:0% 50%}
        50%{background-position:100% 25%}
        100%{background-position:0% 50%}
    }
</style>  
### <span id="a-r-t">$x^2$ Hello</span>

On Firefox: Firefox

On Chrome/Safari:

enter image description here

If it's any help, I'm using Hugo and the Goldmark md renderer.

I appreciate any help!

Here is the HTML output:

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="/css/custom.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css">
</head>

<body class="page-page" id="pagetop">

  <main class="content">
    <style>
      #a-r-t {
        background-image: repeating-linear-gradient(to right, red, orange, yellow, lime, cyan, violet);
        display: inline-block;
        background-size: 800% 800%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: rainbow 8s ease infinite;
      }

      @keyframes rainbow {
        0% {
          background-position: 0% 50%
        }

        50% {
          background-position: 100% 25%
        }

        100% {
          background-position: 0% 50%
        }
      }
    </style>
    <h3 id="span-ida-r-tsum-lim_n-to-infty-x2-hellospan"><span id="a-r-t">$\sum \lim_{n \to \infty} x^2$ Hello!</span></h3>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/auto-render.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      renderMathInElement(document.body, {
        delimiters: [
          { left: "$$", right: "$$", display: true },
          { left: "\\[", right: "\\]", display: true },
          { left: "$", right: "$", display: false },
          { left: "\\(", right: "\\)", display: false }
        ]
      });
    });
  </script>

</body>
</html>

This is what I see when I click Ctrl + U and save the code. I don't really see why this is happening just for firefox and not chrome + safari since I thought webkit was related with chrome only.

https://jsfiddle.net/30dzgns9/

Here's a jsfiddle with this code.

Solution

  • This is a known bug with Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1352821

    Specifically, position:relative; interferes with background-clip:text;, and so the text has color:transparent; and nothing else.

    It's not an exact solution, but this seems to give a similar effect. What about this?

    JSfiddle: https://jsfiddle.net/xgfm6cz8/

    CSS:

    #a-r-t *{
    background-clip: text;
    -webkit-background-clip: text;
    background-image: inherit;
    animation: inherit;
    background-size: inherit;
}