transform:scale vs traditional resizing

Question

Are there any drawbacks of using transform: scale(x.x) instead of doing traditional resizing with the width and height properties? Does scaling produce a lower quality image or something?

Answer 1

Scale generates a general better quality result (from a visual point of view) because many browsers render it via GPU (in other words, with hardware acceleration) using advanced resampling algotithms, but it has a drawback:

Scaled object does not create a space around it, larger than its original size.

Practically.... Browsers' behaviour is the following (approximately):

1. Render of the object "A" in its original size
2. Placing of other objects around it (until this point browsers completely ignore scale rule declaration)
3. At the end, "visually" scaling of "A", overlapping others like it would be in a different layer

Answer 2

transform:scale(); will not expand or shrink initial space used by your element.

a 100px square may look 200px , but will still use 100px² on screen . it will overlap what's around.