Use transforms instead of altering widths
marcoms opened this issue · comments
Would it be possible to use CSS transforms instead of setting max-width? Transforms should be more performant especially on low-end devices.
Yes, I've been thinking about that but using vw with max-width allows the image to scale to a known max-width.
Using transform: scale() how would you make sure the expanded image is <= 100% of the window width since it purposely overflows its container? I believe more JavaScript would be necessary here but I'm open to suggestions.
If it overflows container (e.g. page), it's useful to make it draggable
See images behavior on Medium
Additional javascript would be required yes, although it shouldn't take too much to clamp the scale factor
To me the trade off would be worth it because afaik setting either width or max-width forces layout to run on each animated frame -- https://csstriggers.com/max-width, https://csstriggers.com/width