Intent to Ship: Independent/Individual Properties for CSS Transforms

[David Baron]

Contact emails

dba...@chromium.org, kev...@chromium.org, fla...@chromium.org

Explainer

None

Specification

https://drafts.csswg.org/css-transforms-2/#individual-transforms

Summary

This adds three new CSS properties: translate, rotate, and scale. This exposes a simple way for web developers to access transforms in an intuitive way, without having to think about how functions in the transform property interact with each other. The properties are individually animatable.

Blink component

Blink

TAG review

Already shipped in two browser engines.

TAG review status

Not applicable (I think)

Risks

Interoperability and Compatibility

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=1424900) Shipped in Firefox 72, January 2020.

WebKit: Shipped/Shipping (https://webkit.org/blog/11420/css-individual-transform-properties/) Shipped in Safari 14.1 (desktop) / 14.5 (iOS), April 2021.

Web developers: Positive: 25 stars on https://bugs.chromium.org/p/chromium/issues/detail?id=496550 . Notable early developer request for the feature (before WG adoption) in: https://twitter.com/rachelnabors/status/618266391993454592 https://twitter.com/rachelnabors/status/618267483296825344 and early reaction to WG adoption in https://twitter.com/SaraSoueidan/status/613368671315054592 . Positive developer reactions to https://twitter.com/argyleink/status/1338907239990497280 . Largely positive reactions to news of other engines shipping the feature in responses to https://twitter.com/jensimmons/status/1387870244392382468 , https://twitter.com/simevidas/status/627956718098485248 , https://twitter.com/dancwilson/status/121457225783989862 , and in https://twitter.com/guerriero_se/status/1338468028804001796 , https://twitter.com/eladsc/status/1216286886697885696 , https://twitter.com/_zouhir/status/1389461399026294791 . More recent developer interest in https://twitter.com/anatudor/status/1377491818636587008 , https://twitter.com/anatudor/status/1309200388311199751 .

Debuggability

Has the standard exposure in devtools that all CSS properties have.

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

Yes

Flag name

CSSIndependentTransformProperties

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=496550

Estimated milestones

The feature has been implemented behind a flag on desktop/android/WebView since Chrome 45 (not a typo).

For an estimated milestone for shipping, I think the feature is close to being ready, so I'm still hoping for Chrome 97 but can't promise that it will be ready in time.  It's waiting on a single chain of dependencies, as described in the bug, so that more than one of the transform properties on a single element can be simultaneously animated on the compositor.

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5705698193178624

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/-GfE73tlLX8/m/hv7Qitys6j8J

This intent message was generated by Chrome Platform Status and then hand-edited a bit.

[Yoav Weiss]

LGTM1

Seems important to catch up here, so thanks for working on this!!

--
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.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iuDCMdC0_WFLDsD-ibr4uodbZ0E9ef33_RWTs37oaovA%40mail.gmail.com.

[Daniel Bratell]

LGTM2.

/Daniel

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

[Manuel Rego Casasnovas]

LGTM3.

On 21/10/2021 19:53, Daniel Bratell wrote:
> LGTM2.
>
> /Daniel
>
> On 2021-10-21 08:19, Yoav Weiss wrote:
>> LGTM1
>> Seems important to catch up here, so thanks for working on this!!
>>
>> On Mon, Oct 18, 2021 at 11:05 PM David Baron <dba...@chromium.org> wrote:
>>
>>
>> Contact emails
>>
>>
>> dba...@chromium.org, kev...@chromium.org, fla...@chromium.org
>>
>>
>> Explainer
>>
>>
>> None
>>
>>
>> Specification
>>
>>
>> https://drafts.csswg.org/css-transforms-2/#individual-transforms
>>
>>
>> Summary
>>
>>
>> This adds three new CSS properties: translate, rotate, and
>> scale. This exposes a simple way for web developers to
>> access transforms in an intuitive way, without having to
>> think about how functions in the transform property
>> interact with each other. The properties are individually
>> animatable.
>>
>>
>>
>> Blink component
>>
>>
>> Blink

>> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink>

>> <https://chromium.googlesource.com/chromium/src/+/master/docs/testing/web_platform_tests.md>?

>>
>>
>> Yes
>>
>>
>> Flag name
>>
>>
>> CSSIndependentTransformProperties
>>
>>
>> Requires code in //chrome?
>>
>>
>> False
>>
>>
>> Tracking bug
>>
>>
>> https://bugs.chromium.org/p/chromium/issues/detail?id=496550
>>
>>
>> Estimated milestones
>>
>> The feature has been implemented behind a flag on
>> desktop/android/WebView since Chrome 45 (not a typo).
>>
>> For an estimated milestone for shipping, I think the feature is
>> close to being ready, so I'm still hoping for Chrome 97 but can't
>> promise that it will be ready in time.  It's waiting on a single
>> chain of dependencies, as described in the bug

>> <https://bugs.chromium.org/p/chromium/issues/detail?id=496550#c29>, so

>> that more than one of the transform properties on a single element
>> can be simultaneously animated on the compositor.
>>
>>
>> Link to entry on the Chrome Platform Status
>>
>>
>> https://chromestatus.com/feature/5705698193178624
>>
>>
>> Links to previous Intent discussions
>>
>>
>> Intent to
>> prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/-GfE73tlLX8/m/hv7Qitys6j8J
>>
>>
>> This intent message was generated by Chrome Platform

>> Status <https://www.chromestatus.com/> and then

>> hand-edited a bit.
>>
>>
>>
>> --
>> 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.
>> To view this discussion on the web visit
>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iuDCMdC0_WFLDsD-ibr4uodbZ0E9ef33_RWTs37oaovA%40mail.gmail.com

>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iuDCMdC0_WFLDsD-ibr4uodbZ0E9ef33_RWTs37oaovA%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>>
>> --
>> 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.
>> To view this discussion on the web visit

>> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfVefWhFRWALWTeT6Ui_pfG%2BJKmZ1CVfd4esM%2BHTbQcpEA%40mail.gmail.com
>> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfVefWhFRWALWTeT6Ui_pfG%2BJKmZ1CVfd4esM%2BHTbQcpEA%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> 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

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/601d6d1a-1072-808b-8086-fcd07423779e%40gmail.com
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/601d6d1a-1072-808b-8086-fcd07423779e%40gmail.com?utm_medium=email&utm_source=footer>.

[Joe Medley]

Hi,

In which version of Chrome do you hope to ship?

Joe

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195

If an API's not documented it doesn't exist.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/4fe5ec28-6b76-1a76-50af-c7f8cbd20440%40igalia.com.

[David Baron]

Despite considerably more delay (in getting the dependencies for compositor animation landed) than I was expecting when I posted the intent to ship... this is now on track to ship in Chrome 104.  (And I've updated chromestatus accordingly.)

-David

[Joe Medley]

Thank you.

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195

If an API's not documented it doesn't exist.