Safari移动版/ iOS上的模糊比例尺

Question

当我在Safari移动版/iOS上缩放元素时，文本看起来模糊。

我在iOS7、iOS8、iOS9甚至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>

- tzi

Answer 1

模糊效果来自于position: fixed和transform: scale()的组合使用。 position: fixed似乎启用了GPU加速，这样可以更快地渲染，但可能会降低字体的呈现质量。

.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>

- tzi