CSS3-Transform wirkt sich auf andere Elemente mit chrome/safari
Ich habe ein Problem, wo mein css3-Transformationen bewirken andere Elemente auf der Seite und auch wodurch Sie mit einer Art flackern. Ich sah noch einen post über diesem, aber Sie haben nicht eine resolution mit dem Thema.
http://scosha.mybigcommerce.com/w107b/ wenn Sie einen Bildlauf über die navigation sehen Sie eine animierte css3-transformation. Es funktioniert gut in firefox, ohne zu flackern aber mit chrome und safari die Wirkung ist sehr offensichtlich, sehen Sie es in der drop-down-Menü-Elemente, sowie den text für die Fußzeile.
Es funktioniert völlig in Ordnung - Chrome 24 auf Mac
Ich habe getestet auf safari/chrome auf mehreren macs, die Wirkung war eigentlich noch schlimmer in safari.
link ist tot. aber trotzdem, ich erlebe das gleiche in chrome 24 auf meinem PC.
Ich habe getestet auf safari/chrome auf mehreren macs, die Wirkung war eigentlich noch schlimmer in safari.
link ist tot. aber trotzdem, ich erlebe das gleiche in chrome 24 auf meinem PC.
InformationsquelleAutor mfdeath | 2012-10-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist ein bekanntes Problem mit Macintosh-text-rendering in Chrome 22 (und anscheinend Safari). GPU-Beschleunigung bewirkt, dass MacOS wechseln von subpixel -, Graustufen-antialiasing, das macht die font-weight erscheinen zu verringern spürbar.
Update:
Als die OP Hinweise unten, die fix ist, gelten
-webkit-font-smoothing: Antialias
- das gilt, das Graustufen-anti-aliasing zu allen Zeiten. Wenn Sie dies tun, werden Sie wahrscheinlich wollen, um erhöhen Sie Ihre font-GEWICHTE alle um, da Graustufen-anti-Aliasing-text sieht insbesondere dünner als sub-pixel -Können Sie den gleichen Effekt, indem Eigenschaften, die verursachen, dass der Inhalt immer GPU-beschleunigte (wie back-face-visibility: hidden), sondern weil diese nicht garantiert sind, um zu verursachen, GPU-Beschleunigung in künftigen browser-Versionen - es ist mehr zukunftstauglich zu legen Graustufen.
Wahrscheinlich erwähnenswert, dass die Einstellung -webkit-font-smoothing: subpixel-Antialiasing; erreichen die gleiche Sache, ohne dass die Art zu erscheinen dünner.
Oder nicht verwenden
-webkit-font-smoothing: antialiased
Danke @AndrewPhilpott !!! Ich dachte, ich würde stecken mit, dünnen text, bis ich sah Ihren Kommentar.
InformationsquelleAutor Michael Mullany
Funktionierende Lösung für flackernde Elemente während des übergangs in Chrome einrichten CSS für parent-Knoten:
-webkit-backface-visibility: hidden;
Dies funktioniert für mich, wenn Hinzugefügt, um das flackern element (nicht die Eltern).
InformationsquelleAutor zajc
Die Lösung für mich war, gilt der Balg css an die Eltern aller betroffenen Elemente.
-webkit-transform:translate3d(0,0,0);
zu.InformationsquelleAutor Bema
Ich hatte das gleiche Problem in Chrome aber nicht in Firefox.
Die temporäre Lösung ist das hinzufügen einer
web-kit
lösen und entfernen Sie den übergang:InformationsquelleAutor Mike