visual artifacts with css transition: transform and transform: scale

Question

In my project I have added scale effects to buttons and links, however, this seems to produce some visual artifacts, like temporary blurring during transitions. This also happens in this snippet:

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 3vw;
  border: 2px solid black;
  transition: transform .3s ease;
}

.button:hover {
  transform: scale(1.1)
}

<div class="button">button</div>

I have checked that I am in the latest version of Chrome(103.0.5060.134), is this just due to how scale() works, and is there something I can do about it?

Any help is appreciated, feel free to leave a comment if you need more information

I'm not sure exactly how things work but my guess is the browser rasterizes the element into pixels at its original size, then just applies the transition to the rendered pixels via the GPU. When it reaches the final position it rasterizes the element again. Speed/ quality tradeoff. ... edit, i am probably wrong. Does this help? https://stackoverflow.com/a/16878602/1626866 — BobtheMagicMoose, Jul 30 '22 at 03:21

score 1 · Answer 1 · answered Jul 30 '22 at 03:43

You're running up against a few things.

First, when there is motion, there is naturally visual blur (this is why cartoons etc always show lines/blur behind people running). Even the most pristine image will produce blur when scaling.
Second, a browser scales by taking an original image and changing its size, but it doesn't change the resolution. So if you have a 1-inch image that's 100 dpi and scale it by 2, then the resulting image is going to be bigger but blurred because those 100 pixels now how to stretch across four square inches rather than one (2-in x 2-in = 4 sq in). You can see this by comparing what it looks like to scale up versus scaling down, or by using css to set an image's initial width and height to be much smaller than its actual size, so it can be scaled up without loss of information.
Third, when it comes to text, I believe browsers convert the text vector to an image first and then scale that image rather than the vector in order to be more efficient, since otherwise it would have to recompute the vector for each frame of the transformation. Instead (since motion naturally has blur anyway), it scales an image of the text and then replaces the final image with the actual text updated to the end size.

visual artifacts with css transition: transform and transform: scale

1 Answers1