search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.39k stars 644 forks source link

[css-transforms] Allow scale() to accept absolute lengths #5273

Open chriskirknielsen opened 4 years ago

chriskirknielsen commented 4 years ago

The scale() function is useful and is used for lots of UI animations. However, sometimes, like in a "FLIP" context, it would be great to be able to specify a length directly, and let the browser figure out the scaling ratio.

I am not certain what implications this would have, as I realise allowing lengths probably also means allowing an auto keyword in a scenario like scale(200px, auto) (equivalent to scaleX(200px)).

Would the browser be able to compute the element's original size (say 300x150), parse scaleX(150px), calculate the 1/2 ratio and resolve to scale(0.5)? Seems like a bit of a stretch but I've run into this a few times and have tried to reach for this but always ended up with a JS-powered solution, or giving up and simplifying it to a fixed scale.

Aside from the FLIP technique, I've had the need for this when resizing an iframe I have no control over. I'd love to be able to say "fit this width and let the height be automatically determined", like scaleX(100vw). (note: it's an iframe that is not responsive)

In my title, I mention "absolute lengths" because I saw that percentages are planned to be accepted as 100% == 1, so it seems that this proposal should only encompass px, em, vw, etc. Another way to phrase it would be "non-percent-based units" perhaps.

Maybe I'm missing something crucial, but as I ran into this again today, so I figured I'd express the idea here!

mirisuzanne commented 6 months ago

I have a use-case (slide deck speaker view) where it would be useful to scale elements so they fit a specific size. But that raised the question for me: is a transform the right tool for the job? With both my use-case, and (I think) the iframe example, we likely need the actual element layout dimensions to change. Normally a transform doesn't impact the layout.

ydaniv commented 6 months ago

@mirisuzanne that sounds more like a job for View Transitions, don't you think?

mirisuzanne commented 6 months ago

In my case, I'm not trying to animate it from one size to another - just take a 'slide' element and scale it down to fit a smaller area.