CSS3変形スケール - ぼかしデスクトップ＆パーフェクトモバイル

Question

私は背景画像を持つdivを持っています。ホバーでは、2つのフィルター（コントラストと輝度）を適用し、小さなスケーリングを行います。

スケール変換中に、画像はChromeとSafariで非常にぼやけてしまいます（動きを止めた後、より明確になりますがまだぼやけています）、Mozillaでは画像がぼやけます。私のiPad（ChromeとSafari）では、このアニメーションは滑らかで素晴らしいように見えます（モバイルデバイスではぼやけて滑らかではないアニメーションが通常ありますが、そうではありませんでした...）。

translate3d(0,0,0), translateZ(0px), perspective: 1000を適用してハードウェアCSS3アクセラレーションを取得しようとしましたが、それでも同じ結果が得られました。ここで

はいくつかのコードです：

.animate { 
    position: absolute; 
    left: 50px; 
    z-index: 2; 

    width: 320px; 
    height: 180px; 

    background-image:url('./images/example.png'); 
    background-size: cover; 
    background-position: center center; 

    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); 

    transition: 300ms ease-out; 
} 

.animate:hover { 
    transform: scale(1.03); 
    filter: contrast(120%) brightness(100%); 
} 

これは私が<img>タグ用のdivの背景画像を交換する場合でも発生します。

Answer 1

スケールの代わりにscale3dを試してみてください。通常、それはブラウザの中では滑らかで、iPadではなく、どこにでもあります。