Firefox 41, 42 require the svg.transform-box.enabled pref to be set to true to support transform-origin and transform-box Firefox 43 supports transform-origin without a pref but only supports transform-box when the svg.transform-box.enabled pref is set to true. In release builds the prefs are false by default.

I'm having a similar issue with transform-origin in Firefox in that it isn't being handled the same in FF as compared to modern browsers Chrome, Safari, and even Opera. I recently posted the following to a dev group I'm a part of and it was suggested that I add my notes here for your review...I hope that the contribution helps you in your endeavors. Thanks! --- Hi! Does anyone know how to animate SVGs in Firefox in a way that works around the transform-origin bug and keeps animations consistent across all browsers? Please only suggest tested code. I would like something that works as far back as FF version 39 but if you understand and have working proof of the fix for version 41 I can deal. My site for visual example: http://dev.jan-michael.net My working code https://github.com/jmwii1981/hello_world/tree/master/css (.../hello_world/css/jan-michael.css OR .../hello_world/css/jan-michael.scss - whichever you find more clever)

(In reply to jmwii1981 from comment #5) > I'm having a similar issue with transform-origin in Firefox in that it isn't > being handled the same in FF as compared to modern browsers Chrome, Safari, > and even Opera. I recently posted the following to a dev group I'm a part of > and it was suggested that I add my notes here for your review...I hope that > the contribution helps you in your endeavors. Thanks! > You'd need to set transform-box: fill-box; and also enable the svg.transform-origin.enabled pref (Firefox 41, 42) or the svg.transform-box.enabled pref (Firefox 43). At the moment Chrome seems to use fill-box by default which is incorrect per the current specification (https://drafts.csswg.org/css-transforms/#transform-box although comment 4 suggests that the specification may change to match Chrome. This is precisely why transform-box support is still behind a pref in Firefox.

What exactly does this code look like to make FF behave like all the other browsers? I'm using CSS animations, not javascript, so there is no "set" command. Enable the svg.transform-origin.enabled pref? Does this mean enabling it in FF? You can't ask thousands of end users to do that.

We need the specification to stabilise per comment 4. Once that's decided we'll turn on the pref.

Obviously it is much wiser to do what Chrome does while the spec is still a draft (the only mention I could find of it is on MDN) The default is completely unintuitive. In addition to that - there is no real way to 'fix' this in all current versions of Firefox. I think everyone would be fine if you still had those settings disabled, but kept the default in a way which does not break websites.

> Why is it much wiser (let alone obviously so) to copy a vendor implementation that deviates from the spec? Because the spec is not decided yet, and because it goes against the way that all other elements work. Do I really need to elaborate why the new behaviour is not intuitive to someone who has been using 3d transforms for past couple years? > the spec is still in draft, so you shouldn't be using these properties in production anyway That is exactly what I am doing - I am using 'transform-origin' which is a w3c recommendation, and I expect it to work the same way across all elements, ignoring unsupported properties. Transform-origin has been available for a while now: http://www.w3.org/TR/css3-transforms/#transform-origin-property > So go get the specification changed. I don't need to, its not even a 'working' draft yet. What are you gonna say if w3c changes their mind? Also, what is exactly the purpose of 'svg.transform-origin.enabled' pref? So far it seems like a rather useless setting.

My test case for this bug: http://codepen.io/BorisChiou/pen/WwpMvL I use firefox 47 (aurora) which enabled the pref of svg.transform-origin.enabled by default, and I set "transform-box: fill-box" in the embedded css style. I think the "transform-origin: 50% 50%" should be the center of this element, but my result is not. Is this related to this? Thanks.

(In reply to Boris Chiou [:boris] from comment #16) > My test case for this bug: > http://codepen.io/BorisChiou/pen/WwpMvL > > I use firefox 47 (aurora) which enabled the pref of > svg.transform-origin.enabled by default, and I set "transform-box: fill-box" > in the embedded css style. I think the "transform-origin: 50% 50%" should be > the center of this element, but my result is not. Is this related to this? > Thanks. You have a SMIL transform and not a CSS transform so transform-origin has no effect. Perhaps it will one day - there is a bug on that but it's not this one.

(In reply to Robert Longson from comment #17) > You have a SMIL transform and not a CSS transform so transform-origin has no > effect. Perhaps it will one day - there is a bug on that but it's not this > one. Thanks for your explanation, Robert. :)

As the spec draft mentioned, https://www.w3.org/TR/css-transforms-1/#transform-rendering, transform-origin should render into the local coordinate system is given by the element’s transformation matrix. Currently, FF Nightly 49 uses the world coordinate system (canvas).

It fair enough to say it works if you set "transform-box:fill-box;" however, I am using the current version of firefox 46.0.1 and transform-box is not available without turning on the flag. When will it be enabled in public builds? and therefore be production ready? The project I am working on uses a third part system that uses a custom build of fennec. Can I assume that if we ask them to provide us with a version that has the flag svg.transform-box.enable true that it is aleast technically possible? Cheers