Intent to Ship: CSS transform-box

152 views
Skip to first unread message

Fredrik Söderquist

unread,
Oct 26, 2017, 10:23:15 AM10/26/17
to blink-dev

Contact emails

f...@opera.com


Spec

https://drafts.csswg.org/css-transforms/#transform-box


Summary

The transform-box property allows defining which reference box to use when computing 'transform' and 'transform-origin'. It currently only has an effect on SVG elements.
This property allows SVG elements to adopt a transform behavior similar to that of HTML elements, by using the geometry of a shape as the basis for transformations (i.e scale around the center of a shape and similar.)
At this point in time we only intend to ship the 'view-box' and 'fill-box' values. Other values will/can be added incrementally when we're able to provide a good enough implementation of them.

Link to “Intent to Implement” blink-dev discussion

https://groups.google.com/a/chromium.org/d/topic/blink-dev/v8g3QF8pRF8/discussion


Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.


Interoperability and Compatibility

The interoperability risk should be low: With the exception of Edge, all browsers ship an interoperable subset of the specification. (The current specification has not yet caught up with various resolutions made. Those edits add additional reference box types and change the initial value [in a compatible way.])

On the compatibility side things are a little bit worse. The Blink behavior for the reference box was a tad magical, almost (but not quite...) switching between the two now-speced values depending on the transform origin. This could cause some issues for content depending on said behavior. (I've tried to establish an upper bound via the 'TransformUsesBoxSizeOnSVG' use counter - https://www.chromestatus.com/metrics/feature/timeline/popularity/1842 .) In most cases any such breakage should be possible to fix by applying 'transform-box: fill-box' to the affected element. The effect should in most cases be visual only.


Edge: No signals (conservative; considered part of https://developer.microsoft.com/en-us/microsoft-edge/platform/status/supportcsstransformsonsvg/)

Firefox: Shipped (https://developer.mozilla.org/en-US/Firefox/Releases/55)

Safari: Shipped (https://webkit.org/blog/7622/release-notes-for-safari-technology-preview-31/ via https://webkit.org/blog/7956/new-webkit-features-in-safari-11/)

Web developers: Positive


Is this feature fully tested by web-platform-tests?

I've submitted a PR with tests for the basic functionality: https://github.com/w3c/web-platform-tests/pull/7971


Entry on the feature dashboard

https://www.chromestatus.com/feature/6643927633362944


Rick Byers

unread,
Oct 26, 2017, 12:54:24 PM10/26/17
to Fredrik Söderquist, blink-dev
Sounds reasonable to me. Just one question:


Does this mean that there's a non-trivial portion of what you've implemented that's not yet tested at all?
 

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAHediLRYkPK0K%3Dr5bWyOLzbjX42_Lb2Yh_F6u-qswQkNHqDcVw%40mail.gmail.com.

Fredrik Söderquist

unread,
Oct 26, 2017, 1:02:48 PM10/26/17
to Rick Byers, blink-dev
There's not a whole lot more too it than what those tests test. (The thing that could use more tests, are different configurations of the viewport for the 'view-box' value - viewBox or not et.c.)


/fs

Rick Byers

unread,
Oct 26, 2017, 5:45:41 PM10/26/17
to Fredrik Söderquist, blink-dev
Ah, great thanks!  If you feel the test coverage is decent and have confirmed that Safari TP is also passing in the same was as Chrome (I can see Firefox is), then LGTM1.

Fredrik Söderquist

unread,
Oct 27, 2017, 10:36:57 AM10/27/17
to Rick Byers, blink-dev
On Thu, Oct 26, 2017 at 11:45 PM, Rick Byers <rby...@chromium.org> wrote:
Ah, great thanks!  If you feel the test coverage is decent and have confirmed that Safari TP is also passing in the same was as Chrome (I can see Firefox is), then LGTM1.

Tests were passing in Safari 11. I've added some additional tests, exposing one bug in Safari and two in Blink (both known issues.)


/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY8oiQAq8cmKC-hX1BbB4MmSFK-nopLVHR9XskahwNT30g%40mail.gmail.com.

Rick Byers

unread,
Oct 27, 2017, 11:30:57 AM10/27/17
to Fredrik Söderquist, blink-dev
On Fri, Oct 27, 2017 at 10:36 AM, Fredrik Söderquist <f...@opera.com> wrote:
On Thu, Oct 26, 2017 at 11:45 PM, Rick Byers <rby...@chromium.org> wrote:
Ah, great thanks!  If you feel the test coverage is decent and have confirmed that Safari TP is also passing in the same was as Chrome (I can see Firefox is), then LGTM1.

Tests were passing in Safari 11. I've added some additional tests, exposing one bug in Safari and two in Blink (both known issues.)

Great, thank you!  

Dimitri Glazkov

unread,
Oct 27, 2017, 12:39:49 PM10/27/17
to Rick Byers, Fredrik Söderquist, blink-dev
LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY90giu29EzuHrYA-WnU3445RpmC31u_RzaqBwAfY%3DQVfw%40mail.gmail.com.

Chris Harrelson

unread,
Oct 27, 2017, 12:40:54 PM10/27/17
to Dimitri Glazkov, Rick Byers, Fredrik Söderquist, blink-dev
LGTM3

LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY90giu29EzuHrYA-WnU3445RpmC31u_RzaqBwAfY%3DQVfw%40mail.gmail.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
 To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOtFfx678XiXCEQui5hL%3DyskL_yVJFSpMKPNnNjdCRx9wkDqMQ%40mail.gmail.com.

Dimitri Glazkov

unread,
Nov 14, 2017, 1:01:28 PM11/14/17
to Chris Harrelson, Rick Byers, Fredrik Söderquist, blink-dev
Want to resurrect this one. DevTools folks pointed out that the change broke them: https://chromium-review.googlesource.com/c/chromium/src/+/765887

This makes me worry about the compat impact on the Web. It's fairly straightforward to fix the DevTools (thanks Fredrik!), but how are we going to fix the rest of the Web? Is there a plan for that?

:DG<

LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY90giu29EzuHrYA-WnU3445RpmC31u_RzaqBwAfY%3DQVfw%40mail.gmail.com.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Daniel Bratell

unread,
Nov 14, 2017, 2:53:31 PM11/14/17
to Chris Harrelson, Dimitri Glazkov, Rick Byers, Fredrik Söderquist, blink-dev
If I understand the initial analysis correctly, this changes something that was not cross-browser so it should only affect code that solely targets Blink based browsers. Devtools is such code (this is not the only time where it has taken advantage of Blink-only behaviour).

It seems hard to know how much web content depends on this. Could be plenty since Blink has such a large market share, but could also be nothing. Do we any indication from web developers?

/Daniel
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOtFfx4NqVjYQ4QPXfg3WV%2BNPCoR_Z1CM1b70H0qj05k5R9Bxw%40mail.gmail.com.



--
/* Opera Software, Linköping, Sweden: CET (UTC+1) */

Rick Byers

unread,
Nov 14, 2017, 3:13:30 PM11/14/17
to Daniel Bratell, Chris Harrelson, Dimitri Glazkov, Fredrik Söderquist, blink-dev
We also need to worry a little about chrome extensions/apps and Android WebView apps.  But we don't have any way to identify the compat risk in those cases proactively so typically rely on reactive response (eg. if we get a report of a broken Android app or two, we add a targetSDK quirk to preserve the old behavior until the app is recompiled against a newer SDK).

On Tue, Nov 14, 2017 at 2:53 PM, Daniel Bratell <bra...@opera.com> wrote:
If I understand the initial analysis correctly, this changes something that was not cross-browser so it should only affect code that solely targets Blink based browsers. Devtools is such code (this is not the only time where it has taken advantage of Blink-only behaviour).

This is really just about blink-specific behavior and not WebKit+blink, right?  I.e. there shouldn't be sites which work correctly on Safari 11 and Chrome 62 but are now broken, right?

It seems hard to know how much web content depends on this. Could be plenty since Blink has such a large market share, but could also be nothing. Do we any indication from web developers?

If developers do file a bug, we should be able to rely on the test team to bisect and assign it to Fredrik.

LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Fredrik Söderquist

unread,
Nov 14, 2017, 3:21:17 PM11/14/17
to Dimitri Glazkov, Chris Harrelson, Rick Byers, blink-dev
On Tue, Nov 14, 2017 at 7:01 PM, Dimitri Glazkov <dgla...@chromium.org> wrote:
Want to resurrect this one. DevTools folks pointed out that the change broke them: https://chromium-review.googlesource.com/c/chromium/src/+/765887

This makes me worry about the compat impact on the Web. It's fairly straightforward to fix the DevTools (thanks Fredrik!), but how are we going to fix the rest of the Web? Is there a plan for that?

I think the current plan is to wait and see - the feature hasn't reached dev yet, and that ought to be the first true collision with reality. As mentioned in the intent, this feature has shipped in Gecko for a while now (where there never was a change in behavior), and also in Safari (11) for close to 2 months now. Prior to sending this intent I went searching in the respective bug-trackers to see if they'd hit anything, and came up empty-handed (there were some bugs in the opposite direction though.)

I'll try to reiterate the following as often as I can in this context:

"In most cases any such breakage should be possible to fix by applying:

'transform-box: fill-box'

to the affected element."

But if anyone has any evangelism resource to offer, I think a short tweet from the right "influencer" could go a long way =).


/fs


:DG<

LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAOtFfx4NqVjYQ4QPXfg3WV%2BNPCoR_Z1CM1b70H0qj05k5R9Bxw%40mail.gmail.com.

Fredrik Söderquist

unread,
Nov 14, 2017, 3:29:12 PM11/14/17
to Rick Byers, Daniel Bratell, Chris Harrelson, Dimitri Glazkov, blink-dev
On Tue, Nov 14, 2017 at 9:13 PM, Rick Byers <rby...@chromium.org> wrote:
We also need to worry a little about chrome extensions/apps and Android WebView apps.  But we don't have any way to identify the compat risk in those cases proactively so typically rely on reactive response (eg. if we get a report of a broken Android app or two, we add a targetSDK quirk to preserve the old behavior until the app is recompiled against a newer SDK).

On Tue, Nov 14, 2017 at 2:53 PM, Daniel Bratell <bra...@opera.com> wrote:
If I understand the initial analysis correctly, this changes something that was not cross-browser so it should only affect code that solely targets Blink based browsers. Devtools is such code (this is not the only time where it has taken advantage of Blink-only behaviour).

This is really just about blink-specific behavior and not WebKit+blink, right?  I.e. there shouldn't be sites which work correctly on Safari 11 and Chrome 62 but are now broken, right?

Safari 11 shipped this feature, so if it works correctly there it will be broken in Chrome 62 - and vice versa of course. Similarly for Firefox (55+ - or "all versions" depending on how you want to put things I suppose.) I guess I could mention Edge too. Missed to mention in my previous reply, but I've seen web developers call this discrepancy out - for example at https://css-tricks.com/transforms-on-svg-elements/ (search for "Firefox") - so it seems this issue is fairly well ventilated in those circles.


/fs

Rick Byers

unread,
Nov 14, 2017, 5:01:55 PM11/14/17
to Fredrik Söderquist, Daniel Bratell, Chris Harrelson, Dimitri Glazkov, blink-dev
Thanks.  I agree with the "wait and see" strategy.  Breakage in DevTools is one interesting data point, but not enough to reconsider the decision IMHO.  Please let us know what else comes up.

Fredrik Söderquist

unread,
Nov 14, 2017, 5:09:08 PM11/14/17
to Rick Byers, Daniel Bratell, Chris Harrelson, Dimitri Glazkov, blink-dev
On Tue, Nov 14, 2017 at 11:01 PM, Rick Byers <rby...@chromium.org> wrote:
Thanks.  I agree with the "wait and see" strategy.  Breakage in DevTools is one interesting data point, but not enough to reconsider the decision IMHO.  Please let us know what else comes up.

Will do.


/fs

Dimitri Glazkov

unread,
Nov 15, 2017, 12:30:32 PM11/15/17
to Fredrik Söderquist, Rick Byers, Daniel Bratell, Chris Harrelson, blink-dev
Makes sense. Thanks again, Fredrik!

:DG<

LGTM2



/fs

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
Reply all
Reply to author
Forward
0 new messages