Intent to ship: CSS 'transform-box' property

[Jonathan Watt]

In bug 1208550[1] we plan to allow the 'transform-box' property[2] to ride the
trains to release.

Summary: This property solves a common SVG authoring request - allowing
transforms in SVG to be relative to an element's bounds (to rotate around its
center, for example) - but in a more consistent way to Chrome/Safari's current,
sometimes confusing behavior.

When considering 'transform' and 'transform-origin' authors may want to change:

1) what percentage values in translations in 'transform' and what
percentage values in 'transform-origin' resolve against

2) what 'transform-origin' is relative to

Right now Blink/Webkit resolve percentage values in
'transform'/'transform-origin' in SVG against the elements bounding box. What
'transform-origin' is relative to depends on what type of value the author
specified. Percentage values in 'transform-origin' specify a position relative
to the top left corner of the element, whereas absolute values specify a point
relative to the origin of the element's current user space (necessary for
backwards compatibility with most SVG). In other words 'transform-origin' is a
little bit magical and unfortunately |transform-origin: 0% 0%| and
|transform-origin: 0 0| will usually specify completely different points. The
idea behind this behavior is that it should just "do the right thing" most of
the time, but it can trip authors up.

Mozilla doesn't have this problem since it always resolves percentage values in
SVG against the nearest SVG viewport's dimensions, and 'transform-origin' is
always relative to the origin of the element's current user space.

Edge doesn't yet implement percentage values in SVG.

Blink/Webkit and Mozilla's different approaches address different authoring use
cases. The former's approach allows authors to transform relative to the bounds
of an element in SVG, similar to a user's expectations if they're used to CSS
transforms in HTML. Mozilla's approach allows objects to be laid out
proportionally to the viewport and avoids the percentage/non-percentage
'transform-origin' gotcha.

The new 'transform-box' property will allow content authors to have transforms
behave in whichever of the ways meets their needs, and eliminate the magical
percentage/non-percentage 'transform-origin' behavior. One thing to note is that
what percentages resolve against and what 'transform-origin' is relative to is
tied together. Either percentage values resolve against the bounds of the
element and 'transform-origin' is relative to the top-left of the element's
bounds, or else percentage values resolve against the nearest SVG viewport and
'transform-origin' is relative to the origin of the element's current user space.

-Jonathan

1. https://bugzilla.mozilla.org/show_bug.cgi?id=1208550
2. http://dev.w3.org/csswg/css-transforms/#propdef-transform-box

[Jeff Muizelaar]

What is the status of this property in other browsers?

-Jeff

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>

[Karl Dubost]

Jonathan,

Le 2 mars 2017 à 06:25, Jonathan Watt <jw...@jwatt.org> a écrit :
> but in a more consistent way to Chrome/Safari's current, sometimes confusing behavior.

[…]

> Edge doesn't yet implement percentage values in SVG.
>
> Blink/Webkit and Mozilla's different approaches address different authoring use
> cases.

Do you expect Web compatibility issues for the behaviour differences?
Could you share example of codes of what would work/not work across browsers?

Thanks.


--
Karl Dubost, mozilla 💡 Webcompat
http://www.la-grange.net/karl/moz

[Jonathan Watt]

On 01/03/2017 21:54, Jeff Muizelaar wrote:
> What is the status of this property in other browsers?

We would be the first to implement.

Safari: it's primarily Apple people who edit the spec so I'd hope they'd
implement, but who knows.

Blink: previously when we've tried to get commitment there's not been much
engagement one way or another. As I'd hoped, using this intent-to-ship as
leverage my latest attempt to engage the Blink devs has now seen some action on
https://bugs.chromium.org/p/chromium/issues/detail?id=595829 to add usage counters.

Edge: no immediate plans to implement CSS transforms on SVG.

[Jonathan Watt]

On 01/03/2017 21:54, Jeff Muizelaar wrote:

> What is the status of this property in other browsers?