Blurry scale on Safari Mobile / iOS

Question

When I scale an element on Safari Mobile / iOS, the text seems blurry.

I tested it on iOS7, iOS8, iOS9 even iOS10.

.sticky-note {
  position: fixed;
  bottom: 1em;
  right: 1em;
  padding: 0.5em 1em;
  
  background: tomato;
  color: white;
  
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div class="sticky-note">
  This text is blurry on iOS
</div>

Answer 1

The blurry effect came from the combination of position: fixed and transform: scale().

The position: fixed seems to enable the GPU acceleration, which is faster, but could reduce rendering quality of fonts.

.sticky-container {
  position: fixed;
  bottom: 1em;
  right: 1em;
}

.note {
  padding: 0.5em 1em;
  
  background: tomato;
  color: white;
  
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div class="sticky-container">
  <div class="note">
    This text is not blurry \o/
  </div>
</div>