CSS Vollbild Weichzeichnen mit GPU

Question

Ich habe genau das Problem von this Frage, aber ich kann nicht kommentieren (wie ich weniger als 50rep).

Es hat damit zu tun, eine bessere Leistung aus der Unschärfe eines Vollbilds durch GPU-Beschleunigung zu bekommen, aber nicht die Seiten "leckt".

Answer 1

Wenn es Ihnen nichts ausmacht, einen zusätzlichen div hinzuzufügen, können Sie einen Wrapper hinzufügen und die Umwandlung darauf anwenden. Ich habe Chrome Dev Tools eingecheckt und in der Tat hat Chrome den Wrapper #bg in eine separate Ebene gerendert, obwohl diese Art von Optimierungen sehr Browser-spezifisch sind. Ich würde empfehlen https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

lesen würde ich Ihnen einen anderen Vorschlag jedoch geben, anstatt ein großes Bild mit und es verwischen, Sie das gleiche Bild auf einem sehr niedrigen Auflösung (etwa 10x10 Pixel) und machen es im Vollbildmodus nutzen können. Fast das gleiche Ergebnis, aber mit viel weniger Bytes zu laden.

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>