Intent to Ship: Independent/Individual Properties for CSS Transforms

133 views
Skip to first unread message

David Baron

unread,
Oct 18, 2021, 5:05:38 PM10/18/21
to blink-dev

Contact emails

dba...@chromium.orgkev...@chromium.orgfla...@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

unread,
Oct 21, 2021, 2:20:15 AM10/21/21
to David Baron, blink-dev
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

unread,
Oct 21, 2021, 1:54:07 PM10/21/21
to Yoav Weiss, David Baron, blink-dev

Manuel Rego Casasnovas

unread,
Oct 21, 2021, 3:03:48 PM10/21/21
to Daniel Bratell, Yoav Weiss, David Baron, blink-dev
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.orgkev...@chromium.orgfla...@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

unread,
Oct 27, 2021, 1:26:57 PM10/27/21
to Manuel Rego Casasnovas, Daniel Bratell, Yoav Weiss, David Baron, blink-dev
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.


Reply all
Reply to author
Forward
0 new messages