CSS3-Transform verursacht, text flackern in Safari und Firefox Mac Yosemite

Hinweis zu OP: Sie scheint zumindest wissen die meisten dieser Konzepte, aber ich habe viele Details in diese Antwort für jemand anderen, der vielleicht ein ähnliches problem.

In modernen Browsern ausgeführt auf einem computer, die eine dedizierte GPU (Prozessor für die Wiedergabe von Grafiken), wird der browser manchmal verlagern die Aufgabe der Erbringung der Webseite von der CPU (die "normal" - Prozessor) und der GPU. Die CPU und GPU haben jeweils Ihre eigenen stärken und Schwächen-die Art der GPU ist, dass es machen kann 3-dimensionale Transformationen sehr effizient, aber möglicherweise nicht in der Lage zu Rendern als Klartext knusprig wie die CPU.

Ihre hover-Effekt wird mit Hilfe einer transformation, die Ihr browser als geeignet für hardware-beschleunigte GPU-rendering (wahrscheinlich ausgelöst durch die scale(1.1) - transformation), und damit hat es sich verschoben rendering vorübergehend auf die GPU, während der hover-animation/transition Auftritt. Nachdem die animation fertig ist, wird die CPU übernimmt das Rendern wieder. Aufgrund der unterschiedlichen rendering-Strategien, die von den verschiedenen Teile der hardware, der text sieht anders aus (weniger scharfe), während die GPU ist in Rechnung zu stellen.

Wir leider (noch) nicht die explizite Steuerung von hardware-Beschleunigung über die CSS - -- der browser setzt, Wann immer es will. Was wir jedoch tun können, ist einige Eigenschaften, die wir vermuten wird die browser in hardware-beschleunigte GPU-Modus. Die Theorie hier ist, dass wir die browser in den GPU-Modus, auch wenn die animation nicht vorkommt, so dass wir nicht sehen, ein "flimmern".

Diese Strategie hat einige Nachteile: - Nutzer besuchen Ihre website Erfahrung leicht erhöhte RAM-Speicherauslastung während Ihrer Seite ist offen, und mobile - /laptop-Nutzer erleben wird, leicht erhöhte Batterieverbrauch. Auf Geräten, die nicht über eine dedizierte GPU-hardware-Beschleunigung wird nicht ausgelöst (aber dann wieder, diese Geräte würden nicht sehen, die "flimmern", das sehen Sie sowieso).

Es sieht aus wie Sie versucht haben, tun Sie dies bereits, indem die scale(1.0) - Eigenschaft, um die un-betreffende element -- meine beste Vermutung ist, dass Ihr browser(s) hat, "clever" und hat erkannt, dass diese Regel findet auch nichts und ignoriert es. Der zuverlässigste Weg zur Auslösung von hardware-Beschleunigung ist in der Regel eine transformation auf der Z-Achse. Versuchen Sie, Ihre transformation auf die folgenden:

@include transform(scale(1.00001), translateZ(0.00001));

Anstatt den Werte "1" und "0" ist, bin ich mit infinitesimal engen Werten; das wird hoffentlich verhindern, dass der browser immer "clever" und ignorieren dabei die Regel.

Ich gehe davon aus, dass Ihr Sass gehören es tut vendor-Präfix. Überprüfen Sie, dass die Letzte Ausgabe enthält nicht nur die -webkit-transform: und -moz-transform:aber es enthält auch die un-Präfix transform: syntax. Wenn Sie sicher sein wollen, (für die Zwecke von debugging), nur geben Sie Sie manuell:

.usp .icon {
  transform: scale(1.00001), translateZ(0.00001);
  -webkit-transform: scale(1.00001), translateZ(0.00001);
  -moz-transform: scale(1.00001), translateZ(0.00001);
}

Auf mein Ende, ich habe nicht die Erfahrung jedes flimmern zu starten, die auf Ihrer Geige (ich vermute, dass mein browser - /OS - /hardware-Konfiguration nicht glaube, dass eine 2-dimensionale Skala ist geeignet für die GPU), also ich bin nicht in der Lage diesen code zu testen. Allerdings habe ich verwendet ähnliche Techniken, ähnliche Probleme zu lösen oft.

InformationsquelleAutor der Antwort Woodrow Barlow

OK!

So, das problem, das ich konfrontiert wurde, war in eine benutzerdefinierte popup, wo ich eine Rad-Effekt auf die Kreuz-Schaltfläche mit css-übergang. Aber das flimmern verursacht Problem im popup.

Nach dem Besuch verschiedenen online-Portalen, die ich kennengelernt habe, die transition-Eigenschaft:

webkit-backface-visibility: hidden;

auf dem transition-element funktioniert wirklich und hält das flackern. Aber mit dieser Eigenschaft verwischt die gesamte Komponente (popup -) in meinem Fall und zu stoppen, hatte ich die Verwendung einer anderen Eigenschaft auf das root-element der Komponente:

webkit-transform: translate3d(0, 0, 0);

aber da ich es in eine benutzerdefinierte popup-was bereits übersetzt wurde und 50% in y-Richtung zu halten, im Zentrum, ich war eingeschränkt, es nicht zu verwenden.

Nach dem spielen mit der css-Eigenschaften für Tage und ausprobieren verschiedener Lösungen, kam ich zu dem Schluss, dass insgesamt die Höhe der Komponente in die transition-element verwendet werden muss AUCH und im Falle von dynamischen Daten, die wir brauchen, um stellen Sie die Ränder und Leerstellen in einer Weise, die Gesamthöhe bleibt AUCH.

Dieser mein Problem gelöst. Nur stellen Sie sicher Gesamthöhe bleibt AUCH und passen die Margen und Polster entsprechend.

Hoffe, es hilft jemand in not zu. 🙂

InformationsquelleAutor der Antwort Avaneesh Tripathi

Ich habe festgestellt, das tritt vor allem auf Elemente, die transformiert wurden (sprich: ein -, modal -, Folien). Gibt es eine Transformation auf jede der übergeordneten Elemente?

Es gibt eine Tonne von fixes rund um das web für webkit-basierte Browser, aber nichts für den Firefox.

InformationsquelleAutor der Antwort Westley Mon