Safari Mobile / iOS上的模糊比例

Question

当我在Safari Mobile / 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>

Answer 1

模糊效果来自position: fixed和transform: scale()的组合。

position: fixed似乎启用了GPU加速，这种速度更快，但可能会降低字体的渲染质量。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;