Jak zapobiec zmianie renderowania tekstu w Webkit podczas przejścia CSS

Używam przejść CSS do przejścia między stanami przekształconymi CSS (w zasadzie przejście skali elementu). Zauważyłem, że gdy element przechodzi, pozostała część tekstu na stronie (w Webkit) ma tendencję do nieznacznej zmiany renderowania, dopóki przejście nie zostanie zakończone.

Skrzypce: http://jsfiddle.net/russelluresti/UeNFK/

Zauważyłem również, że nie występuje to w moich nagłówkach, które mają -webkit-font-smoothing: antialiasedparę właściwość / wartość. Tak więc, zastanawiam się, czy istnieje sposób, aby tekst zachował swój domyślny wygląd (wartość „auto” dla wygładzania czcionek) i nie zmieniał renderowania podczas przejścia.

Próbowałem jawnie ustawić tekst tak, aby używał wartości „auto”, ale to nic nie daje. Powinienem również zauważyć, że ustawienie wygładzania czcionek na „none” również zapobiega migotaniu renderowania podczas przejścia.

Każda pomoc jest mile widziana.

Edytuj 1

Powinienem zauważyć, że korzystam z systemu OS X. Patrząc na mój test w Chrome na Parallels, nie zauważyłem, że dwa różne akapity zachowują się inaczej, więc może to być problem wyłącznie dla komputerów Mac.

Myślę, że znalazłem rozwiązanie:

-webkit-transform: translateZ(0px);

Wymuszenie akceleracji sprzętowej w elemencie nadrzędnym wydaje się rozwiązywać problem ...

EDYCJA Jak skomentowano, ten hack wyłącza wygładzanie czcionek i może pogorszyć renderowanie tekstu w zależności od czcionek, przeglądarki i systemu operacyjnego!

AKTUALIZACJA Sierpień 2020

Nie musisz już kierować na Safari zapytania o media, aby włączyć wygładzanie czcionek subpikselowych. Domyślnie jest w porządku.

Jednak chociaż domyślnie używa wygładzania czcionek subpikselowych, maść w wygładzaniu czcionek Chrome jest znacząca , dla każdego, kto szuka spójnego renderowania tekstu .

1. To jest renderowanie jasnego tekstu przez Chrome na ciemnym tle
2. To jest renderowanie ciemnego tekstu przez Chrome na jasnym tle

Spójrz na rozmiar całości w literze e powyżej. Jasny tekst na ciemnym tle jest renderowany z zauważalnie większą wagą niż ciemny tekst na jasnym tle (z identycznym stylem czcionki CSS).

Jednym z rozwiązań dla witryn, które szanują ustawienia ciemnego / jasnego motywu użytkownika, jest kierowanie na Chrome zapytania o media, które jest ograniczone do trybu ciemnego i przełączenie go na wygładzanie bez subpikseli, jak na przykład:

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

Wynik :

O wiele bardziej spójna waga tekstu, niezależnie od tego, czy renderuje się jasno w ciemności, czy ciemno w świetle.

Zobacz porównanie przed i po:

-

AKTUALIZACJA Maj 2018

-webkit-font-smoothing: subpixel-antialiasedteraz nie działa w Chrome, ale w Safari nadal znacznie poprawia rzeczy, ALE TYLKO W RETINIE. Bez tego w Safari na ekranach siatkówki tekst jest cienki i mdły, podczas gdy z nim tekst ma odpowiednią wagę. Ale jeśli użyjesz tego na wyświetlaczach innych niż Retina w Safari (szczególnie przy niewielkich wartościach wagi) tekst to katastrofa. Zdecydowanie zalecamy użycie zapytania o media:

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

Jawne ustawienie -webkit-font-smoothing: subpixel-antialiasedjest najlepszym obecnie rozwiązaniem, jeśli chcesz przynajmniej częściowo uniknąć cieńszego, antyaliasowanego tekstu.

--tl; dr--

Zarówno w przeglądarce Safari, jak i Chrome, w których domyślne renderowanie czcionek wykorzystuje antyaliasing subpikselowy, każdy kod CSS, który wymusza renderowanie oparte na GPU, jak powyższe sugestie dotyczące użycia transformacji przy użyciu translateZ lub nawet tylko przejścia skali, spowoduje, że Safari i Chrome automatycznie „poddadzą się ”na wygładzaniu czcionek z antyaliasem subpikselowym i zamiast tego przełącz się na zwykły antyaliasowany tekst, który wygląda dużo jaśniej i cieńszy, szczególnie w przeglądarce Safari.

Inne reakcje skupiały się na utrzymaniu stałego renderowania, po prostu ustawiając lub wymuszając wygładzanie czcionek w przypadku cieńszego, antyliofilizowanego tekstu. Moim zdaniem użycie translateZ lub backface hidden znacznie obniża jakość renderowania tekstu i jest najlepszym rozwiązaniem, jeśli chcesz, aby tekst pozostał spójny, a cieńszy tekst jest w porządku -webkit-font-smoothing: antialiased. Jednak jawne ustawienie -webkit-font-smoothing: subpixel-antialiasedfaktycznie ma pewien wpływ - tekst nadal nieznacznie się zmienia i jest prawie wyraźnie cieńszy podczas przejść renderowanych na GPU, ale nie tak cienki, jak bez tego ustawienia. Wygląda więc na to, że przynajmniej częściowo zapobiega przełączaniu się na prosty tekst antyliściowy.

Zauważyłem, że prawie za każdym razem, gdy mam problemy z grafiką (migotanie / zacinanie się / przerywanie / itp.) Z powodu przejścia, używając -webkit-backface-visibility: hidden; na elementach, które działają w górę, zwykle rozwiązują problem.

Aby zapobiec zmianom w renderowaniu tekstu spowodowanym akceleracją sprzętową, możesz:

1. Ustaw cały tekst na -webkit-font-smoothing: antialiased. Oznacza to, że tekst jest cieńszy i nie ma antyaliasingu podpikselowego.

2. Jeśli chcesz, aby tekst, na który ma wpływ przyspieszanie sprzętowe, był wygładzany subpikselem (domyślny rodzaj wygładzania czcionki), to umieszczenie tego tekstu wewnątrz wejścia, bez obramowań i wyłączonych, zachowa antyaliasowanie subpikseli (przynajmniej w przeglądarce Chrome w systemie Mac OS X). Nie testowałem tego na innych platformach, ale jeśli antyaliasing subpikselowy jest ważny, możesz przynajmniej użyć tej sztuczki.

Jeśli używasz Firefoksa na komputerze Mac, będziesz chciał użyć następującego pliku CSS, aby rozwiązać problem.

-moz-osx-font-smoothing: grayscale;

Więcej na ten temat w Webfont Smoothing and Antialiasing w przeglądarkach Firefox i Opera

To właśnie zadziałało dla mnie. Mam nadzieję, że to pomoże. Znaleziono w innym poście stosu overflow.

-webkit-font-smoothing:antialiased;
-webkit-backface-visibility:hidden;

Aby zapobiec zmianie renderowania, musisz ustawić font-smoothing: antialiased(lub none).

Wyłączenie renderowania czcionek subpikselowych przez przeglądarkę jest prawdopodobnie efektem ubocznym przyspieszenia sprzętowego. Gdy tło, na którym renderujesz, stale się przesuwa, tekst nie może być renderowany na osobnej warstwie, ponieważ każda klatka musi być sprawdzona na wszystkich warstwach tła. Może to poważnie obniżyć wydajność.

Apple często wyłącza wygładzanie czcionek subpikselowych we własnych witrynach.

Oprócz powyższych rozwiązań ( -webkit-transform: translateZ(0px)w elemencie i -webkit-font-smoothing: antialiasedna stronie) niektóre elementy mogą nadal działać źle. Dla mnie był to tekst zastępczy w elemencie wejściowym: W tym celu użyjposition:relative

Miałem ten sam problem. Przeczytaj uważnie:

Zauważyłem, że gdy element przechodzi, pozostała część tekstu na stronie (w Webkit) ma tendencję do nieznacznej zmiany renderowania, dopóki przejście nie zostanie zakończone.

żadne z powyższych rozwiązań nie wydawało się działać. Jednak ustawienie (takie jak)

#myanimation { -webkit-transform: translateZ(0px); }

na elemencie, który ma animację, zadziałał.

Przenosząc animowany element do warstwy GPU, usuwasz go z normalnego przepływu renderowania strony (na przykład rzeczy takie jak indeks z nie będą już działać). Jako efekt uboczny animacja i reszta strony nie będą już na siebie wpływać.

Jeśli ma to wpływ na renderowanie czcionki, robi to oczywiście tylko dla elementu animowanego. Nie widzę różnicy w moim Chrome.