Przekształcenia CSS3 wpływające na inne elementy z chromem/safari

Mam problem, w którym moje transformacje css3 wpływają na inne elementy na stronie, a nawet powodują migotanie. Widziałem inny post na ten temat, ale nie mieli oni rozwiązania problemu.Przekształcenia CSS3 wpływające na inne elementy z chromem/safari

http://scosha.mybigcommerce.com/w107b/ po przewinięciu nawigacji zobaczysz animowaną transformację css3. Działa dobrze w firefoxie bez migotania, ale z chromem i safari efekt jest bardzo oczywisty, widać go w rozwijanych elementach menu oraz w tekście stopki.

Źródło

2012-10-10 mfdeath

To działa całkowicie w porządku - 24 Chrome na Mac –

mam przetestowane na safari/chrome na wielu komputerach Mac, efekt był rzeczywiście gorszy w safari. – mfdeath

Link nie działa. ale tak czy inaczej, mam taki sam na Chrome 24 na moim komputerze. – vsync

To jest a known issue z renderowaniem tekstu w systemie Macintosh w przeglądarce Chrome 22 (i podobno Safari). Akceleracja GPU powoduje przełączenie MacOS z subpiksela na wygładzanie skali szarości, co sprawia, że masa czcionki wydaje się wyraźnie zmniejszać.

Aktualizacja:

Jak zauważa OP Poniżej poprawka ma zastosowanie -webkit-font-smoothing: antialiased - co dotyczy szarości antyaliasingu w każdej chwili. Jeśli to zrobisz, prawdopodobnie będziesz chciał zwiększyć grubość czcionki, ponieważ tekst wygładzany w skali szarości wygląda znacznie cieńszy niż subpikselowy. Można uzyskać ten sam efekt, stosując właściwości, które powodują, że treść zawsze być przyspieszane przez GPU (takie jak widoczność z tyłu: ukryta), ale ponieważ nie gwarantuje to przyspieszenia GPU w przyszłych wersjach przeglądarek - w przyszłości lepiej jest określić skalę szarości.

Źródło

2012-10-11 00:31:16

Dzięki temu koleś znalazł to, czego szukałem. Dla tych z was, którzy kończą tutaj z gogli: -webkit-wygładzanie czcionek: antyaliasing; wydaje się rozwiązać problem. – mfdeath

Prawdopodobnie warto zauważyć, że ustawienie -webkit-wygładzanie czcionki: subpiksel-antyaliasing; osiągnie to samo, nie powodując, że typ wydaje się cieńszy. –

Lub [nie używaj "-webkit-font-smoothing: antiialiased"] (http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/) –

-3

Miałem ten sam problem w Chrome, ale nie w Firefoksie.

tymczasowy fix jest dodanie web-kit ustalić i usunąć przejścia:

-webkit-transition: none;

Źródło

2012-10-13 01:48:31 Mike

rozwiązanie Praca dla migotania elementów podczas przejścia w Chrome skonfigurować CSS dla węzła nadrzędnego:

-webkit-backface-visibility: hidden;

Źródło

2013-11-06 16:19:37 zajc

Wydaje mi się, że to po prostu powoduje ustawienie renderowania czcionek na wygładzanie w skali szarości. – enyo

Działa to dla mnie, gdy dodany do migotania elementu (nie rodzic). –

Rozwiązaniem było dla mnie zastosowanie crs poniżej do rodzica wszystkich dotkniętych elementów.

-webkit-transform-style: preserve-3d; 
-webkit-transform:translate3d(0,0,0);

Źródło

2015-01-09 15:27:01 Bema

Działa dla mnie z tylko '-webkit-transform: translate3d (0,0,0);' 'too. –

Przekształcenia CSS3 wpływające na inne elementy z chromem/safari

Odpowiedz

Powiązane problemy