Dimiter Dimiter - 1 month ago 15
CSS Question

SVG CSS Transform animation, cross-browser issues

I am working on a simple hamburger-menu SVG icon for a website I'm building. To make the often-used icon a bit less boring, I thought it would be nice to have a bit of animation in it. I decided to make the three horizontal bars rotate (each one separately) to form a cross.

As I'm developing on a Mac, Safari was the first browser I tested it in, and everything worked exactly as intended. But then I decided to open the same file in Firefox, to see that the animation was broken. On further investigating the issue, I noticed that inverting the order of the CSS transforms applied to the bars had the exact opposite effect: The result in Firefox was perfect, while Safari displayed the icon incorrectly.

The simplified code for the hamburger icon:

<svg id="hamburger" viewBox="0 0 30 30" width="30" height="30">
<rect id="top" x="0" y="8px" width="30" height="2"/>
<rect id="middle" x="0" y="15px" width="30" height="2"/>
<rect id="bottom" x="0" y="22px" width="30" height="2"/>
</svg>


The animation was added in an Sass-file with the following code:

#top,
#middle,
#bottom {
transform-origin: center;
transform: none;
transition: transform .5s ease;
}

#hamburger.active {
#top {
transform: translateY(7px) rotate(45deg);
}
#middle {
transform: rotate(135deg);
}
#bottom {
transform: translateY(- 7px) rotate(45deg);
}
}


The strange thing is, that when the order of the
translate
and
rotate
transforms is turned around, the two different browsers show the exact opposite result. I understand that the order of the transforms can affect the final result (although I think in this case it shouldn't), but I don't understand why the 'compatibility' is inverted by switching the order.

I have created 2 almost identical Codepen-examples with the above code. The only difference is the order of the
translate
and
rotate
transforms:



Correct, working animation:



Broken animation:



Thanks a lot in advance!

Answer

thanks for your question. This is a really interesting issue with Firefox. I tested both cases and indeed webkit has no issues with your code, while firefox is misplacing the elements.

I think this might be due to transform-origin differences across browsers.

Either way I was able to help your hamburger become a cross in firefox, by addind a -moz-transition property with a little different values for the transform.

Try updating your code to this, and tell me if it solves your issue :)

#hamburger.active {
  #top {
    transform: translateY(7px) rotate(45deg);
    -moz-transform: translate(-5px,3px) rotate(45deg);
  }
  #middle {
    transform: rotate(135deg);
  }
  #bottom {
    transform: translateY(-7px) rotate(45deg);
    -moz-transform: translate(5px,-7px) rotate(45deg);
  }
}

Also remember to write negative values without a space. So like this "-7px" and not like this "- 7px"

Comments