SVG path element scale transition bug in Firefox browser

Question

I am trying to animate a svg path element on hover by adding transform scale transition on it.

It works perfectly as intended on chrome, but on firefox it breaks the transition.

Note: It works without transition animation, but transition is needed in this use case.

HTML:

CSS:

path{
  transition: transform 0.2s;
}
path:hover{  
  transform: scale(1.1);
}

JSFiddle link: https://jsfiddle.net/tpkjf15b/2/

Edit:

Chrome 80 (desired output): GIF

Firefox 74 (broken): GIF

user_3702797 · Answer

This is a weird bug, apparently caused by the fractional stroke-width as demonstrated by this reduced case:

path {
  transform: scale(1, 1);  
  transition: transform 0.2s linear;
}
path:hover {  
  transform: scale(1.1, 1.1);
}
:checked ~ svg path {
  stroke-width: 0.1;
  stroke: red;
}

add stroke

So for your case, since the strokes are set to the same color as the fills, you may be able to avoid this bug by redefining your shapes in a way you don't need that stroke hack. I guess you used it to avoid antialiasing artifacts, but instead of such an hack, you'd be better using integer coordinates when possible, or maybe simply using a viewBox that would allow stroke-width to be 1 could work.

Also, I didn't checked if this bug has already been referenced, but I can still reproduce on Nightly 76, so you might want to open an issue on Mozilla's bugzilla.

user_7052927 · Answer

You need to write css transform: translate3d(0px,0px,1px) scale(1); property on path before hover and with hover need to write something like transform: translate3d(0px,0px,1px) scale(1.1);

Finally transform: translateZ(1px); make it run perfectly in FF.
Works too: transform: translate3d(0px,0px,1px);

I hope this will help you lot.

path{
  transform: translate3d(0px,0px,1px) scale(1);
  transition: transform 0.2s;
}
path:hover{  
  transform: translate3d(0px,0px,1px) scale(1.1);
}

SVG path element scale transition bug in Firefox browser

2 Answers