Repository navigation
[css-transforms-2] Serialization of the computed value of translate property. #2124
Description
I can not find a definition of serialization of individual transform's computed value in the spec[1]
When serializing a 'translate' property with percentage value, such as 'translate: 50%', should we resolve it to px or keep it unresolved?
PS: Currently, both edge and chromium resolve percentage to px.
[1] https://drafts.csswg.org/css-transforms-2/#individual-transforms
Activity
Nadya678 commentedon Dec 21, 2017
transform:translate(50% 0%)is also by firefox translated to px.btw.
translate:50%andscale:2 2and other "styles" from transform shall be removed.Example:
THERE ARE TWO DIFFERENT TRANSFORMS. It cannot be separated to scale and translate.
Living demo: https://jsfiddle.net/p7sb1o6h/
The scale, translate, rotate etc. styles (not transforms) shall be removed from all drafts.
Loirooriol commentedon Dec 21, 2017
@Nadya678 Of course it's not commutative, but it's well-defined if the spec specifies the order, and it does: https://drafts.csswg.org/css-transforms-2/#ctm
I suspect these new properties were added precisely because some people without linear algebra notions assume
transformis commutative and then they are confused by the results.Nadya678 commentedon Dec 24, 2017
But I need the commutative effect. People without knowledge of algebra also doesn't describe the
rotation: 0,1,1,60deg;. The vectors and matrices are "black magic" for them,For me the hardly is imagine 3D effects. Not by knowledge of algebra - if I calculate, the values are correct but imagine without seeing it. 2D without any problem.
BTW. Shall be rotation instead of rotate and translation instead of translate if you don't use them as values but as properties (a noun).
css-meeting-bot commentedon Feb 8, 2018
The Working Group just discussed
[css-transforms-2] Serialization of the computed value of `translate` property, and agreed to the following resolutions:RESOLVED: % values of translate are serialized as percent for computed values. Add note making the behavior explicit.The full IRC log of that discussion
<dael> Topic: [css-transforms-2] Serialization of the computed value of `translate` property<dael> github: https://github.com//issues/2124
<dael> TabAtkins: It's if translate 50% serialized to pixel or %. it depnds on layout info. Has to stay as a % right?
<dael> AmeliaBR: Because % are resolved against transform box which are usually width and height of css box and is more complex for svg
<dael> Rossen_: I'm in favor to keep them as % so we don't rely on layout.
<dael> TabAtkins: And this is by default in the spec [reads]
<dael> Rossen_: So it's editorial making it explicit?
<dael> TabAtkins: At best we could match what translate function says. No need to do anything different.
<dael> AmeliaBR: It's for impl
<dael> ericwilligers: Perhaps it was blink making it absolute for lack of works?
<dael> ??: The FF impl wanted ot align with chromium but I said spec said % so I wanted to clairyf
<dael> ericwilligers: I think we'd got a wpt that says % so we have to fix blink and edge
<dael> Rossen_: % is easier, less work. I'm willing to make that change.
<dael> Rossen_: Is blink okay?
<dael> smfr: Yeah.
<dael> Rossen_: Webkit?
<dael> ericwilligers: I don't think they impl the prop
<dael> Rossen_: objections?
<birtles> s/??/birtles/
<Rossen_> RESOLVED: % values of translate are serialized as percent for computed values. Add note making the behavior explicit.
CSS translate: serialize % as percent for computed values
CSS translate: serialize % as percent for computed values
CSS translate: serialize % as percent for computed values
CSS translate: serialize % as percent for computed values
CSS translate: serialize % as percent for computed values
Bug 1437257 [wpt PR 9469] - CSS translate: serialize % as percent for…
Bug 1437257 [wpt PR 9469] - CSS translate: serialize % as percent for…
Bug 1437257 [wpt PR 9469] - CSS translate: serialize % as percent for…
Bug 1437257 [wpt PR 9469] - CSS translate: serialize % as percent for…
[css-transforms-2] Add note that computed value of translate has perc…
[css-transforms-2] Add note that computed value of translate has perc…
Bug 1437257 [wpt PR 9469] - CSS translate: serialize % as percent for…