GPUを使用したCSSフルスクリーンブラー

Question

私は正確にthis質問から問題がありますが、私はコメントできません（50rep未満です）。

GPUアクセラレーションでフルスクリーンイメージをぼかすと、より良いパフォーマンスを得ることができますが、側面が "リーク"しないようにする必要があります。

Answer 1

divを追加しても構わない場合は、ラッパーを追加して変換を適用することができます。 私はChrome Dev Toolsをチェックしましたが、実際にChromeは別のレイヤーにラッパー#bgをレンダリングしましたが、この種の最適化はブラウザ固有のものです。 は私がhttps://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

を読んで推薦する私はあなたが非常に低い解像度（例えば10×10ピクセル）で、同じ画像を使用して、それ全画面表示にすることができ、しかし、あなたに別の提案を与える代わりに、大きな画像を使用して、それをぼかします。ほとんど同じ結果ですが、読み込むバイト数ははるかに少なくなります。

html { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: red; 
 
    position: relative; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
#bg { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    transform: translate3d(0,0,0); 
 
} 
 

 
#bg > div { 
 
    background-image:url('http://lorempixel.com/1920/1920/'); 
 
    background-size: cover; 
 
    position: absolute; 
 
    left: -60px; 
 
    top: -60px; 
 
    right: -60px; 
 
    bottom: -60px; 
 
    filter: blur(60px); 
 
}

<div id="bg"> 
 
    <div></div> 
 
</div>