411 bytes, image/svg+xml
442 bytes, image/svg+xml
Created attachment 8667705 [details] testcase 1 (square should rotate in place, about its own center) STR: 1. Load http://codepen.io/corysimmons/pen/qspwE 2. Watch the animated dot above the "i" which animates into view. EXPECTED RESULTS: Dot should go straight down to the "i" and spin in place. ACTUAL RESULTS: Dot shifts left & right. I'm also attaching a reduced testcase, with "transform-origin: center" (or equivalently "50% 50%") and an animated rotation on a rect. In Chrome, this spins the rect about its center. In Firefox, it spins about *the center of the SVG canvas*. robert / jwatt / heycam, do you know if we're doing the right thing? I suspect we're not, according to the MDN documentation at least, which says percentages are supposed to apply to the size of the bounding box (of the affected element, I imagine): https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin (It looks like we recently enabled this behavior in bug 1175492. If it turns out we're doing the wrong thing, should we revisit that decision?)
Attachment #8667705 - Attachment description: testcase 1 → testcase 1 (square should rotate in place, about its own center)
Also see bug 923193 and https://drafts.csswg.org/css-transforms/#transform-box .
At the moment we only support transform-box:view-box without a pref and that seems to me to be what we're doing here (call out if you disagree) That kind of makes this bug invalid since you want transform-box: fill-box and that isn't the default for SVG elements. bug 1209061 suggests that maybe transform-box: fill-box should be the default instead.
Created attachment 8668582 [details] testcase 2 (with "transform-box: fill-box"; matches Chrome rendering) Ah, thanks for the clarification. I hadn't read up enough on the interactions between transform-box & transform-origin, & was just filed this for the difference between Firefox & Chrome's transform-origin handling here (without transform-box explicitly specified). Here's a testcase with "transform-box: fill-box" - that does indeed make the rect spin in-place, as I'd initially expected. Perhaps this should be duped to bug 1209061?
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1209061
You need to log in before you can comment on or make changes to this bug.