Why is this SVG mask animation choppy in Firefox but smooth in Chrome?

Question

I've simplified an SVG animation I'm working on (which should look like a container filling up) to the example below which runs smoothly in Chrome, but is choppy/stutters in Firefox. It's an SVG with three layers: The first layer is a for the last layer which is a red circle. The middle layer of the SVG is a grey circle. So the red circle sits on top of the grey circle and is made visible by the mask which gets animated via CSS:

#color-mask {
  fill: white;
}

#color-mask path {
  animation: waves .75s infinite linear;
}

@keyframes waves {
  from {
    transform: translateX(17rem);
  }
  to {
    transform: translateX(-17rem);
  }
}

#color-mask g {
  animation: raise 6s infinite ease-in-out;
  animation-direction: alternate;
}

@keyframes raise {
  from {
    transform: translateY(11rem);
  }
  to {
    transform: translateY(-18rem);
  }
}

The CSS animation translates the both horizontally and vertically but at different rates.

I've also tried using a instead of a and get the same results. I get the same choppy/stuttering results in Firefox on Windows and Linux.

One very odd quirk I noticed in Firefox is that if I have the dev tools open, the animation occasionally will run smoothly. Firefox's dev tools also don't seem to indicate any problems, but I'm not an expert in SVG animations. Why is Firefox choking on this while Chrome isn't?

user_8620333 · Answer

A different idea using CSS mask where you will not have the issue. I used the path your provided as mask. Simply make sure to set the correct value for the viewBox

.box {
  display:inline-flex;
  width:300px;
  background: rgb(180, 180, 180);
  border-radius:50%;
  position:relative;
  overflow:hidden;
}
.box:after {
  content:"";
  padding-top:100%;
}
.box:before {
  content:"";
  position:absolute;
  left:0%;
  width:200%;
  height:30%;
  bottom:-10%;
  background:rgb(196, 3, 3);
  -webkit-mask:url('data:image/svg+xml;utf8,') top/100% auto;
          mask:url('data:image/svg+xml;utf8,') top/100% auto; 
   animation:raise 6s infinite ease-in-out alternate,waves .75s infinite linear;
}
@keyframes waves {
  to {
    transform: translateX(-50%);
  }
}
@keyframes raise {
  to {
    height:160%;
  }
}

To use only transformation you can add an extra element:

.box {
  width:300px;
  display:inline-block;
  background: rgb(180, 180, 180);
  border-radius:50%;
  overflow:hidden;
}
.box div {
  padding-top:100%;
  position:relative;    
  animation: raise 6s infinite ease-in-out alternate;
}
.box div:before {
  content:"";
  position:absolute;
  left:0%;
  width:200%;
  height:160%;
  bottom:-10%;
  background:rgb(196, 3, 3);
  -webkit-mask:url('data:image/svg+xml;utf8,') top/100% auto;
          mask:url('data:image/svg+xml;utf8,') top/100% auto; 
   animation:waves .75s infinite linear;
}
@keyframes waves {
  to {
    transform: translateX(-50%);
  }
}
@keyframes raise {
  from {
    transform:translateY(120%);
  }
}

user_8620333 · Answer

Here is the SVG solution. Simply need to adjust the value of the first animation to get a perfect repeat:

user_6150051 · Answer

I spent way more time digging into this than I would have liked, the issue I had could not easily be solved by rethinking the animation itself. It turns out the culprit is that firefox will throttle animations on off-screen elements, and this includes masks and clipPaths. Unfortunately you can't position clipPaths or elements within them on their own, so the best solution that I have found is to split the svg into

two: one for the clipPath, that you position with position: fixed so that it's always on screen (it's not rendered) and one for the actual content that will reference the clipPath.

Unfortunately you also have to account for the origin of the SVG being transformed by your animation, if your animation would transform it off screen then you're going to experience the problem again. In your particular example, if you position the SVG at least 18rems down from the top of the page and 17rem right from the left edge, as long as the top-left corner of the page is visible, the animation will play smoothly.

Testcase demonstrating that animated masks stutter in Firefox (apparently) stars when effective top-left mask element coordinate crosses actual page viewport's boundary. (View in "Full page" or better as attachment from bugreport 1693016):



SVG mask animation crossing viewport boundary Firefox stutter test

Why is this SVG mask animation choppy in Firefox but smooth in Chrome?

3 Answers