search

charlestati / amplify

A tiny script allowing inline image zoom
https://charlestati.github.io/amplify/
Apache License 2.0
456 stars 16 forks source link

Use transforms instead of altering widths #1

Open marcoms opened 7 years ago

marcoms commented 7 years ago

Would it be possible to use CSS transforms instead of setting max-width? Transforms should be more performant especially on low-end devices.

charlestati commented 7 years ago

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.

ColCh commented 7 years ago

If it overflows container (e.g. page), it's useful to make it draggable

See images behavior on Medium

marcoms commented 7 years ago

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