CSS-Übergänge verzögern

Question

Dieses HTML5/CSS-Thema funktioniert perfekt vom Desktop und auch in der mobilen Version immer vom Desktop-Browser, aber es gibt eine Verzögerung während der Übergänge im mobilen Browser (getestet mit Chrome und Firefox).

Jemand kann mir helfen, das CSS zu verbessern? Ich habe viele Lösungen getestet, wie Hardware-Beschleunigung mit transform css propriety, aber nichts scheint zu funktionieren.

Dies ist das Thema: https://html5up.net/uploads/demos/dimension/

Answer 1

Ohne Graben zu tief hinein, die Verzögerung, wenn die Menüpunkte klicken wird durch den Übergang der blur Filter auf dem großen Hintergrundbild verursacht. Es ist nur eine inhärent teure Operation, und es ist auch mit der Umwandlung der scale Transformation kombiniert.

Es gibt einige Tricks in diesem Bereich, wie z. B. das Umschalten in ein Bild mit niedriger Auflösung für die Unschärfe, aber es sind wirklich Hacks - die kurze Antwort ist, wenn Sie eine reibungslose Übergangsleistung benötigen Animiere Filter für komplexe Elemente und animiere auf keinen Fall kombinierte Filter und andere Operationen gleichzeitig.

Als eine schnelle Lösung, finden Sie die body.is-article-visible #bg:after Abschnitt im Stylesheet, und entfernen Sie die Transformation: scale(); Linien, so dass der Hintergrund nur, nicht zu verwischen und Skalierung verschwimmt:

body.is-article-visible #bg:after { 
    -moz-filter: blur(0.2rem); 
    -webkit-filter: blur(0.2rem); 
    -ms-filter: blur(0.2rem); 
    filter: blur(0.2rem); 
} 

die einen großen Unterschied, um die Leistung auf meiner Maschine macht.