Rozmyty tekst po użyciu transformacji CSS: scale (); w przeglądarce Chrome

Wygląda na to, że ostatnia aktualizacja przeglądarki Google Chrome powoduje rozmazany tekst po wykonaniu pliku transform: scale(). W szczególności robię to:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

Jeśli odwiedzasz http://rourkery.com w przeglądarce Chrome, powinieneś zobaczyć problem w głównym obszarze tekstowym. Kiedyś tego nie robił i wydaje się, że nie wpływa to na inne przeglądarki webkit (takie jak Safari). Było kilka innych postów o ludziach, którzy mają podobny problem z transformacjami 3D, ale nie mogę znaleźć nic na temat transformacji 2D.

Wszelkie pomysły będą mile widziane, dzięki!

Mam ten problem kilka razy i wydaje się, że są 2 sposoby jego rozwiązania (pokazane poniżej). Możesz użyć dowolnej z tych właściwości, aby naprawić renderowanie, lub obu jednocześnie.

Ukryta widoczność od tyłu rozwiązuje problem, ponieważ upraszcza animację tylko do przodu obiektu, podczas gdy stanem domyślnym jest przód i tył.

backface-visibility: hidden;

TranslateZ działa również, ponieważ jest to hack, aby dodać przyspieszenie sprzętowe do animacji.

transform: translateZ(0);

Obie te właściwości rozwiązują problem, który masz, ale niektórzy lubią też je dodawać

-webkit-font-smoothing: subpixel-antialiased;

do ich animacji do obiektu. Uważam, że może zmienić renderowanie czcionki internetowej, ale nie krępuj się też eksperymentować z tą metodą.

Aby poprawić rozmycie, zwł. w Chrome spróbuj zrobić to:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

AKTUALIZACJA: Perspektywa zwiększa odległość między użytkownikiem a płaszczyzną Z, która technicznie skaluje obiekt, sprawiając, że rozmycie wydaje się „trwałe”. perspective(1px)Powyżej jest jak kaczka-taśmy , ponieważ mamy dopasowanie rozmazania staramy się rozwiązać. Możesz mieć więcej szczęścia z poniższym css:

transform: translateZ(0);
backface-visibility: hidden;

Zauważyłem, że trochę pomogło dostosowanie współczynnika skali.

Korzystanie scale(1.048)ponad(1.05)Wydawało się, że generuje lepsze przybliżenie rozmiaru czcionki z całego piksela, zmniejszając rozmycie subpikselowe.

Użyłem również, translateZ(0)co wydaje się dostosowywać ostatni krok zaokrąglania Chrome w animacji transformacji. Jest to plus za korzystanie z funkcji onhover, ponieważ zwiększa prędkość i zmniejsza szum wizualny. Jednak w przypadku funkcji onclick nie użyłbym jej, ponieważ przekształcona czcionka nie wydaje się być tak chrupiąca.

Po wypróbowaniu wszystkiego innego tutaj bez powodzenia, ostatecznie rozwiązałem ten problem usunięcie z will-change: transform;nieruchomości. Z jakiegoś powodu spowodowało to strasznie niewyraźne skalowanie w przeglądarce Chrome, ale nie Firefox.

Zamiast

transform: scale(1.5);

za pomocą

zoom : 150%;

rozwiązuje problem z rozmyciem tekstu w przeglądarce Chrome.

To musi być błąd w Chrome (wersja 56.0.2924.87), ale poniższe rozwiązanie rozwiązuje problem rozmycia podczas zmiany właściwości css w konsoli („. 0”). Zgłoszę to.

filter: blur(.0px)

Sunderls doprowadziły mnie do odpowiedzi. Z wyjątkiem filter: scalenie istnieje, alefilter: blur tak.

Zastosuj kolejne deklaracje do elementów, które wydają się rozmyte (w moim przypadku były wewnątrz przekształconego elementu):

backface-visibility: hidden;    
-webkit-filter: blur(0);

To prawie działało idealnie. „ Prawie ”, ponieważ używam przejścia i podczas przejścia elementy nie wyglądają idealnie, ale po zakończeniu przejścia tak.

Dowiedziałem się, że problem występuje w przypadku względnych przekształceń w jakikolwiek sposób. translateX (50%), scale (1.1) czy cokolwiek. podanie wartości bezwzględnych zawsze działa (nie powoduje rozmycia tekstu (uresów)).

Żadne z wymienionych tutaj rozwiązań nie zadziałało i myślę, że jeszcze nie ma rozwiązania (używając Chrome 62.0.3202.94, kiedy to piszę).

W moim przypadku transform: translateY(-50%) translateX(-50%) powoduje rozmycie (chcę wyśrodkować okno dialogowe).

Aby osiągnąć nieco bardziej „bezwzględne” wartości, musiałem ustawić wartości dziesiętne na transform: translateY(-50.09%) translateX(-50.09%).

UWAGA

Jestem pewien, że te wartości różnią się na różnych rozmiarach ekranu. Chciałem tylko podzielić się swoimi doświadczeniami, na wypadek gdyby to komuś pomogło.

Znalazłem znacznie lepsze i czystsze rozwiązanie:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

lub

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Dzięki temu wpisowi: Zapobieganie rozmytemu renderowaniu za pomocą transform: scale

Dodawanie perspective(1px)zadziałało dla mnie.

transform: scale(1.005);

do

transform: scale(1.005) perspective(1px);

Spróbuj użyć zoom: 101%;do złożonych projektów, gdy nie możesz użyć kombinacji powiększenia i skali.

W moim przypadku poniższy kod spowodował rozmytą czcionkę:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

i samo dodanie właściwości zoom naprawiło to dla mnie. Baw się z zoomem, dla mnie zadziałały:

zoom: 97%;   

Kolejną poprawką, którą właśnie znalazłem dla rozmytych transformacji (translate3d, scaleX) w Chrome, jest ustawienie elementu jako „ display: inline-table ;". Wydaje się, że w niektórych przypadkach wymusza zaokrąglenie pikseli (na osi X).

Czytałem, że pozycjonowanie subpikseli w Chrome było zamierzone i deweloperzy tego nie naprawią.

Aktualizacja 2019
Błąd wyświetlania Chrome jest nadal nieusunięty i chociaż nie jest to wina patronów, żadna z propozycji przedstawionych w całości tej witryny nie pomaga w rozwiązaniu problemu. Mogę się zgodzić, że próbowałem każdego z nich na próżno: tylko 1 jest blisko i taka jest reguła css: filter: blur (0); co eliminuje przesuwanie kontenera o 1 piksel, ale nie rozwiązuje problemu z niewyraźnym wyświetlaniem samego kontenera i wszelkiej zawartości, którą może on zawierać.

Oto rzeczywistość: dosłownie nie ma rozwiązania tego problemu, więc oto obejście dla płynnych witryn internetowych

PRZYPADEK
Obecnie tworzę płynną stronę internetową i mam 3 elementy div, wszystkie wyśrodkowane z efektami najechania kursorem i udostępniającymi wartości procentowe zarówno w szerokości, jak i pozycji. Błąd Chrome występuje w środkowym kontenerze, który jest ustawiony na lewo: 50%; i transform: translateX (-50%); wspólne ustawienie.

PRZYKŁAD: Najpierw HTML ...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Oto CSS, w którym występuje błąd Chrome ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Oto poprawiony css ...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Zakłócone skrzypce: https://jsfiddle.net/m9bgrunx/2/
Naprawiono skrzypce: https://jsfiddle.net/uoc6e2dm/2/

Jak widać, niewielka ilość poprawek w CSS powinna zmniejszyć lub wyeliminować wymóg używania transformacji do pozycjonowania. Może to również dotyczyć witryn o stałej szerokości, a także elastycznych.

Mam ten sam problem. Naprawiłem to za pomocą:

.element {
  display: table
}

Żadne z powyższych nie działało dla mnie. Miałem tę animację dla wyskakujących okienek:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

W moim przypadku efekt rozmycia zniknął po zastosowaniu tej reguły: -webkit-perspective: 1000;mimo że jest oznaczony jako nieużywany w inspektorze Chrome.

Moje rozwiązanie brzmiało:

wyświetlacz: początkowy;

Wtedy był chrupiący i ostry

Żadne z powyższych nie działało dla mnie.

Zadziałało, kiedy dodałem perspektywę

tj. z

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

zmieniłem na

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Naprawiłem moją sprawę, dodając:

transform: perspective(-1px)

DLA CHORME:

Wypróbowałem tutaj wszystkie sugestie. Ale nie zadziałało. Moja uczelnia znalazła świetne rozwiązanie, które działa lepiej:

NIE powinieneś skalować powyżej 1.0

I uwzględnij translateZ(0)w najechaniu, ale NIE w pozycji bez najechania / początkowej.

Przykład:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Użyłem kombinacji wszystkich odpowiedzi i to w końcu zadziałało:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Miałem problem z rozmytym tekstem w przeglądarce Chrome, ale nie w przeglądarce Firefox, kiedy korzystałem transform: translate(-50%,-50%).

Cóż, naprawdę wypróbowałem wiele obejść, takich jak:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

Żadne z nich nie zadziałało.

Na koniec wyrównałem wysokość i szerokość elementu. To rozwiązało problem za mnie !!!

Uwaga: może to zależeć od przypadku użycia do przypadku użycia. Ale na pewno warto spróbować!

Wypróbowałem wiele przykładów z tych odpowiedzi, niestety nic nie pomogło w Chrome, Version 81.0.4044.138 zamiast tego dodałem do elementu transformującego

 transform-origin: 50% 50%;

ten

 transform-origin: 51% 51%;

to mi pomaga

Dla mnie problem polegał na tym, że moje elementy były używane transformStyle: preserve-3d. Zdałem sobie sprawę, że nie jest to w rzeczywistości potrzebne dla aplikacji i usunięcie go naprawiło rozmycie.

Usunąłem to z mojego kodu - transform-style: preserve-3d; i dodałem to-transform: perspective(1px) translateZ(0);

plama zniknęła!

Wydaje się, że w przeglądarce Chrome 74.0.3729.169, aktualnej z dnia 25.05.19, nie ma żadnego rozwiązania problemu rozmycia przy niektórych poziomach powiększenia przeglądarki spowodowanego przez przekształcenie. Nawet prosty TransformY(50px)element rozmyje element. To nie występuje w aktualnych wersjach przeglądarki Firefox, Edge lub Safari i nie wydaje się występować na wszystkich poziomach powiększenia.

Trudno będzie go rozwiązać za pomocą samego CSS.

Więc rozwiązałem to za pomocą jquery.

To jest mój CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

a to jest moja jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Aby dodać do szaleństwa naprawiania, umieszczenie {border: 1px solid # ???} wokół źle wyglądającego obiektu rozwiązuje problem. Jeśli masz stabilny kolor tła, rozważ to również. To takie głupie, chyba nikt nie pomyślał o wspominaniu, eh eh.

możesz użyć css, filteraby to naprawić.

.element {
    filter: blur(0);
}

o przedrostku dostawcy, zrób to sam. -webkit-filter, -ms-filter. szczegóły są tutaj http://browser.colla.me/show/css_transformation_scale_cause_blurring

Tekst nie będzie rozmyte, jeśli nie .transitiontransform

Po prostu zrób to:

&:hover {
    transform: scale(1.1);
}

Bez przejścia jak transition: all .2s;