Kevin Powell - Community•12mo ago

Is this a bug in Chrome (`@supports (animation)` for a SVG favicon)?

I have the following SVG as my favicon on https://bafybeihfwqwlluejiuskhmgdcq7sme54m4ewtzfluodr2duj3yokjzyehe.ipfs.dweb.link/

<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'Battle Skill';
        /* `url()` pointing to a external file doesn't work in Firefox favicon. */
        src: url('data:font/woff2;base64,…'); /* omitted b/c it's 300KiB */
      }

      text {
        fill: #e4711b;
        font-family: 'Battle Skill';
        font-size: 415px;
        paint-order: stroke fill markers;
        stroke-width: 10;
        stroke: #00ff19;
        animation: scroll 5s ease-in 0s infinite;
      }

      @keyframes scroll {
        0% { transform: translateX(0px) }
        10% { transform: translateX(0px) }
        20% { transform: translateX(-200px) }
        30% { transform: translateX(-200px) }
        45% { transform: translateX(-425px) }
        55% { transform: translateX(-425px) }
        70% { transform: translateX(-575px) }
        80% { transform: translateX(-575px) }
        100% { transform: translateX(0px) }
      }

      rect { fill: green }

      @supports (not(animation: scroll)) {
        text { animation: none }
        rect { fill: red }
      }
    </style>
  </defs>
  <title>MBTI Ligature</title>
  <rect width="300" height="300"/>
  <text x="-3.172616" y="280.16232">MBTI</text>
</svg>

<svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      @font-face {
        font-family: 'Battle Skill';
        /* `url()` pointing to a external file doesn't work in Firefox favicon. */
        src: url('data:font/woff2;base64,…'); /* omitted b/c it's 300KiB */
      }

      text {
        fill: #e4711b;
        font-family: 'Battle Skill';
        font-size: 415px;
        paint-order: stroke fill markers;
        stroke-width: 10;
        stroke: #00ff19;
        animation: scroll 5s ease-in 0s infinite;
      }

      @keyframes scroll {
        0% { transform: translateX(0px) }
        10% { transform: translateX(0px) }
        20% { transform: translateX(-200px) }
        30% { transform: translateX(-200px) }
        45% { transform: translateX(-425px) }
        55% { transform: translateX(-425px) }
        70% { transform: translateX(-575px) }
        80% { transform: translateX(-575px) }
        100% { transform: translateX(0px) }
      }

      rect { fill: green }

      @supports (not(animation: scroll)) {
        text { animation: none }
        rect { fill: red }
      }
    </style>
  </defs>
  <title>MBTI Ligature</title>
  <rect width="300" height="300"/>
  <text x="-3.172616" y="280.16232">MBTI</text>
</svg>

In Firefox, I get an animated favicon. In Chrome, I get just the first letter, on a green background, no animation. In Brave, I just get a green square, no letters. I'm using @supports (not(animation: scroll)) to try and identify environments that don't support @keyframes, but it doesn't match any of the browsers. Shouldn't it?

1 Reply

karen_byrd•12mo ago

Ya only firefox has it the others for me are just green boxes. I know Chrome supports svg but I don't think they allow the animation with favicons.

Gaming

Programming

Is this a bug in Chrome *(`@supports (animation)` for a SVG favicon)*?

Is this a bug in Chrome (`@supports (animation)` for a SVG favicon)?