CSS Transformation causes SVG to wiggle in Firefox

Question

I have a SVG of a play button in my application that I am applying a CSS transform effect to on hover, scaling up by a small amount.

This works fine in Chrome, however in Firefox 54 the inner polygon wiggles slightly when the animation resets after removing the :hover pseudo-class.

I have tried the answers from: Images wiggles when hover (scale effect) to no avail.

The SVG and CSS I am using, make sure to view in Firefox. The problem is very subtle and it seems like the triangle's scaling resets to a different position, then once the transition concludes it snaps back to it's original position.

How can I fix this in Firefox?

svg {
  min-width: 75px;
  width: 15%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -moz-filter: blur(0px);
}

svg circle {
  transition: all 0.2s ease-in-out;
  transform-origin: 50% 50%;
  -moz-filter: blur(0px);
}

svg polygon {
  transition: all 0.2s ease-in-out;
  transform-origin: 50% 50%;
  -moz-filter: blur(0px);
}

span:hover .circle {
  fill: #000;
  fill-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

span:hover .triangle {
  fill-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
}

<span style='width:100%;'>
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 237 237'>
    <circle class='circle' fill='#666' fill-opacity='0.5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='109.8' cy='109.8' r='103.3' stroke='#000' />
    <polygon class='triangle' fill='#fff' fill-opacity='0.5' stroke-width='8' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='76.5,62.5 153.5,105.8 76.5,154.1' stroke='#000'/>
  </svg>
</span>

score 0 · Answer 1 · answered Jun 26 '17 at 08:07

0

I am using FF 54.0 on Windows and am not seeing any "wiggle".

If you are having problems, it might be because of the fact that transform-origin: 50% 50% behaves differently in Chrome and Firefox (Firefox is correct).

See: svg transform-origin problems in firefox

answered Jun 26 '17 at 08:07

Paul LeBeau

97,474
9
154
181

The spec changed. Now [nobody's right](https://bugzilla.mozilla.org/show_bug.cgi?id=1371943) :( – Robert Longson Jun 26 '17 at 10:29
LOL. I hadn't heard. :/ – Paul LeBeau Jun 26 '17 at 10:37
w3c waited till we tried to ship transform-box then immediately broke us. After we spent years waiting for them to fix the spec so when we did ship we'd ship something compatible. *sigh* – Robert Longson Jun 26 '17 at 10:40
@PaulLeBeau My problem is I may ultimately not know how big the button is as I am going to allow my users to set the size themselves, hence 50%. – Steve Jun 27 '17 at 01:31
@RobertLongson does that mean that this solution wouldn't work anyway? – Steve Jun 27 '17 at 01:31
@Steve That's not a problem. When applied to SVG elements, the `transform-origin` is interpreted as SVG coordinates. So it is safe to use `transform-origin: 113.5px 113.5px`. It'll work at whatever the button size is. – Paul LeBeau Jun 27 '17 at 05:07

CSS Transformation causes SVG to wiggle in Firefox

1 Answers1