CSS scaling looks pixeled in Safari

Asked Feb 06 '17 at 12:39

Active Feb 06 '17 at 12:39

Viewed 63 times

In Safari, an element looks pixeled while it is scaling. When the transition is finished turns sharp. In Chrome it looks sharp the whole time. Take a look at this example: http://codepen.io/siggmus/pen/LxBPWg

CSS:

div {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  transition: transform 2s;
}

div:hover {
  transform: scale(8);
}

How can I make it so the element looks sharp while it is scaling in Safari?

asked Feb 06 '17 at 12:39

allegutta

5,626
10
38
56

I expect that would be a performance benefit for Safari (WebKit) while Chrome (Blink) has found a way to manage the performance overhead – Technohacker Feb 06 '17 at 12:43
3

I would think of the `div:hover` as `scale(1)` and the unhovered as `scale(0.2)` – jbutler483 Feb 06 '17 at 12:43
http://stackoverflow.com/questions/11318676/css3-scale-causes-divs-to-become-pixelated – Mazz Feb 06 '17 at 12:48

CSS scaling looks pixeled in Safari

0 Answers0