Closed Bug 1209061 Opened 9 years ago Closed 7 years ago

transform-origin not applied correctly on svg content

Categories

(Core :: SVG, defect)

defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: erik, Unassigned)

References

(Blocks 2 open bugs, )

Details

(Keywords: testcase)

Attachments

(4 files)

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.99 Safari/537.36 Vivaldi/1.0.283.8

Steps to reproduce:

1. Load http://jsfiddle.net/fs6cLt38/1/

Sidenote: Chrome currently gets the the same test wrong if transform is an attribute instead of a property (see http://jsfiddle.net/fs6cLt38). Please don't make the same mistake, it should be a true presentation attribute :)


Actual results:

The black diamond shape is misplaced (due to transform-origin being applied incorrectly).


Expected results:

There should be no red in the page.
Blocks: 779683
Component: Untriaged → SVG
Keywords: testcase
Product: Firefox → Core
It works if add transform-box:fill-box; to the style
@Alice(In reply to Alice0775 White from comment #1)
> It works if add transform-box:fill-box; to the style

Why is 'fill-box' not the (default) used value for elements without layout boxes? As this example shows, making the used value be 'view-box' produces a non-intuitive result.

Anyway, I can take my feedback to the style and svg mailinglists.
(In reply to yem_salat from comment #11)
> 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? And as far as fixes for all versions of Firefox go, the spec is still in draft, so you shouldn't be using these properties in production anyway.
(In reply to yem_salat from comment #11)
> 
> The default is completely unintuitive.

So go get the specification changed.
Sorry, just wanted to add that I did read the discussion on the w3c panel, and I do understand where they are coming from with the transform-box property, but I still think it is best to keep websites from breaking until everything is finalized.
(In reply to Daosheng Mu[:daoshengmu] from comment #19)
> As the spec draft mentioned,

That's the wrong/obsolete spec. https://drafts.csswg.org/css-transforms/#transform-box is the right spec. Note the following text:

For SVG elements without an associated CSS layout box, the used value for border-box is view-box.
Robert, you are right. In current spec, "for SVG elements without an associated CSS layout box, the used value for border-box is view-box." I agree this is very unintuitive for users. I look forward the spec getting changed.
(In reply to rburnie from comment #22)
> 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?
> 

Comment 6 already explains what the issue is. We don't know whether Chrome or the spec will change.
The spec currently says "For SVG elements without an associated CSS layout box, the used value for border-box is view-box." It has to be that way to avoid breaking huge amounts of SVG out there, so I don't think we can or should change that. Let's close this as INVALID and get our transform-box implementation shipped so that authors can get their content to behave the way they want it to.
Status: UNCONFIRMED → RESOLVED
Closed: 7 years ago
Resolution: --- → INVALID
Making a note here that Firefox 55 now has support for the "transform-box" CSS property. Setting it to "fill-box" will mimic that of Chrome with respect to transform-origin in SVG trees.

transform-box: fill-box;
transform-origin: center; /* or transform-origin: 50% */

Related: https://bugzilla.mozilla.org/show_bug.cgi?id=1208550

Actually the original example works the same both in Chrome 73 and in FF 65. Well not exactly the same but close enough.

You need to use transform-box:fill-box; for both to get what you expect. Attaching screens.

Attached image chrome_73_fill-box.png
Attached image FF_65_default.png
Attached image FF_65_fill-box.png
You need to log in before you can comment on or make changes to this bug.