CODEWITHSUNDEEP
javascriptfirefoxsvgcss-transforms
shan
shan

Reputation: 3145

Firefox SVG transform-origin still not fixed?

I read in the Firefox documentation that SVG transform-origin was fixed in Firefox with Firefox 41+, but I'm using Firefox 49 and having some weird effects..

Here is my SVG animation in Chrome:

correct animation

.. and here it is in Firefox:

wtf firefox

My code is like so—

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.59 674.02">
  ...
  <path class="fillCup" d="M395.56,528.9l6.53,36.05c0,2.42,6.08,4.38,13.57,4.38s13.57-2,13.57-4.38l6.53-36.05s-0.68,4.5-20.11,4.5S395.56,528.9,395.56,528.9Z" transform="translate(-17.93 -12.21)"/>
  <polygon class="sparkle" points="407.41 538.79 407.47 530.6 403.98 528.96 407.82 528.62 410.59 520.9 410.53 529.1 413.81 530.7 410.18 531.08 407.41 538.79"/>
</svg>

and the css:

.sparkle {
  fill: #fff;
  transform-origin: 50% 50%;
  animation: pulse 1s linear 0s infinite alternate forwards;
}

.fillCup {
  fill: #4fc3f7;
  transform: scale(0, 0) translate(-17.93px, -12.21px);
  transform-origin: 10% 70%;
}

where animation pulse is

@keyframes pulse {
  0% {
    transform: scale(.7, .7);
  }
  100% {
    transform: scale(1, 1);
  }
}

and the .fillCup polygon is being animated to scale(1, 1) with javascript.

(note: I'm actually using a sass mixin for these, but I've ommitted them for simplification of code. firefox chooses to use transform over moz-transform or -webkit-transform so that's the only "prefix" I've included here.)

Is there a "proper" way I'm supposed to be doing the transform-origin so that it works across all browsers? Is Chrome the one that's doing it incorrectly? When I switch the percentages in Firefox the actual positions it uses seem completely arbitrary.

Upvotes: 0

Views: 493

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Firefox is actually the one following the specification correctly. It is Chrome that is incorrect. It implemented transform-origin early and the behaviour of percentage values is different from that finalised in the spec.

The simplest solution is to not use percentage values. Use absolute coordinates.

Upvotes: 2

Related Questions