Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Transitions and Transforms Transform Origin in Firefox

Posted by Lasse Pedersen
Lasse Pedersen
10,416 Points

Is it actually an issue with Firefox?

As far as I've heard, the way Firefox handles this is how it's supposed to be handled according to the specs, meaning the issue is actually with Chrome. Am I misinformed?

I'm asking since the description for this video says "However, there is an issue in Firefox with transform-origin and percentage values."

EDIT: In the video, it acts differently than it, so I assume there was a bug at the time of making this video which has later been resolved. But the transform-origin still needs to be 50% 25%.

1 Answer

hector alvarado
hector alvarado
15,796 Points
hector alvarado
hector alvarado
15,796 Points

I think the big problem it's the values are set as absolute values, so if the size of your elements change that means it will break again, in chrome if its set as porcentages it's scalable. That kinda break the idea of SVG's.