Scheint so, als ob die Position / Reihenfolge von filter: none; einen großen Unterschied in Safari (Geschwindigkeit) macht. Könnte jemand eine solide Erklärung dafür liefern, was passiert?
Überprüfen Sie die folgenden beiden Beispiele nur in Safari
Beispiel 1: (Mit filter: none; am Ende der CSS-Regel ist es in Safari sehr langsam)
Beispiel 2: (Move filter: none; über anderen Browser-spezifischen Filter machen es viel viel schneller)
Ich habe online gesucht, um eine Erklärung zu finden, aber kein Glück?
Ich habe meine Vermutungen, aber soweit ich weiß, hört CSS nicht auf, andere Regeln zu prüfen, wenn es wie filter: none; aussieht?
Ihr Hauptproblem ist die Art und Weise, wie Sie filter: none; implementieren (oder wie Sie den zuvor eingestellten Graustufenfilter entfernen). Sie haben Recht, das zu sagen:
Soweit ich weiß, hört CSS nicht auf, andere Regeln zu prüfen, wenn sie gesehen werden Filter: keine;?
Aber genau darum geht es! Es scheint, dass das Setzen des Filters auf none viel ressourcenintensiver ist, als einfach die Graustufen zurück zu 0% ! Zu ändern!
Ich habe im Buch Pro CSS3 Animation von Dudley Storey ein Zitat gefunden, das diese Hypothese bestätigt:
"Beachten Sie, dass Sie nicht ohne Probleme in den Status" keine "oder keinen Filter wechseln können. Der Filter muss einen neuen Wert erhalten." ( Storey, 113 )
Daher liest Safari in Beispiel 1 das CSS und bleibt im Wesentlichen mit der viel arbeitsintensiveren Aufgabe, alle Filter zu entfernen, anstatt nur den Graustufenfilter auf 0% zu setzen. In Beispiel 2 sieht Safari das -webkit-filter: grayscale(0%); zuletzt, was bedeutet, dass es das CSS ist, das es ausführt (und es ist einfacher, es zu tun).
Obwohl ich denke, dass dies die Frage beantwortet, hoffe ich, dass mehr erfahrene Menschen ihre Beiträge teilen. Ich bin nicht wirklich zufrieden, weil mir gesagt wurde, dass Konvention "generische" CSS-Tags vor Ihre eigenen setzen soll (Putting -webkit , -moz , vor anderen CSS), und die einzige Information, die ich auf Apple gefunden habe Safari-Dokumentation ist eine vage Warnung:
Filter sind visuelle Effekte, die auf Bilder und andere angewendet werden können HTML-Elemente ... Diese Filter sind ressourcenintensiv. Benutze sie sparsam und nur wenn nötig. Stellen Sie sicher, dass Sie Ihren Inhalt auf einer Website testen Vielzahl von Computern und Geräten, um dieses Rendering zu bestätigen Die Leistung wird nicht beeinträchtigt, vor allem beim Animieren. Quelle
Am einfachsten (und am ehesten konform mit der Konvention) ist es, filter:none; ganz zu entfernen, da es redundant und ehrlich gesagt unnötig ist, wenn der einzige Filter, den Sie entfernen, Graustufen ist.
Ich hoffe, es hilft, und die Antwort ist kohärent. Es ist ein bisschen spät für mich, also vergib mir für Fehler!
Tags und Links css css3 safari css-filters