ぼかしフィルターを変更すると、画像が少し震えます。
これがjsfiddleのデモです。デモでボタンを2回クリックしてください
body {
background-color: #000;
}
body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
z-index: -1;
background: url(https://static01.nyt.com/newsgraphics/2017/12/26/2018-1-olympics-climate/assets/images/469466931-1254.jpg) center no-repeat;
background-size: cover;
transition: filter 2s;
}
body.blurred::before {
filter: blur(30px);
}
非 Retina ディスプレイの Mac で Chrome 63.0.3239.84 を使用しています。
同様の質問がたくさんありますが、ホバー時に画像が移動するのに役立つ回答はありません
- chrome opacity issue
CSS トランジション効果により、画像がぼやけます/Chromeで画像が1px移動しますか?