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アクセラレーションを有効にしているようですが、これは高速ですが、フォントのレンダリング品質を低下させる可能性があります。

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