Używam transformacji CSS3 do obracania obrazów i pól tekstowych z ramkami na mojej stronie.
Problem polega na tym, że obramowanie wygląda na postrzępione w Chrome, jak gra (w niskiej rozdzielczości) bez wygładzania krawędzi. W IE, Operze i FF wygląda to znacznie lepiej, ponieważ używa się AA (co jest nadal wyraźnie widoczne, ale nie takie złe). Nie mogę przetestować Safari, ponieważ nie mam komputera Mac.
Obrócone zdjęcie i sam tekst wyglądają dobrze, tylko krawędź wygląda na postrzępioną.
Używam CSS:
.rotate2deg {
transform: rotate(2deg);
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
}
Czy jest jakiś sposób, aby to naprawić, np. Zmuszając Chrome do używania AA?
Przykład poniżej:
Odpowiedzi:
Na wypadek, gdyby ktoś szukał tego później, fajną sztuczką, aby pozbyć się tych postrzępionych krawędzi w transformacjach CSS w Chrome, jest dodanie właściwości CSS
-webkit-backface-visibility
o wartościhidden
. W moich własnych testach całkowicie je wygładziłem. Mam nadzieję, że to pomaga.źródło
padding: 1px; -webkit-background-clip: content-box;
padding: 1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-background-clip:content-box;background-clip:content-box;
Jeśli używasz
transition
zamiasttransform
,-webkit-backface-visibility: hidden;
nie działa. Podczas animacji pojawia się postrzępiona krawędź przezroczystego pliku png.Aby go rozwiązać, użyłem:
outline: 1px solid transparent;
źródło
Dodanie przezroczystej ramki 1px uruchomi wygładzanie
Ewentualnie dodaj przezroczysty cień pola o wielkości 1 piksela.
źródło
outline: 1px solid transparent;
zadziałało dobrze dla mnie. Inne powyższe rozwiązania nie działały wystarczająco dobrze.outline: 1px solid transparent;
Wypróbuj transformację 3d. To działa jak urok!
źródło
preserve-3d
;rotate
nadal można go używać bez zmiany narotateZ
).Wybrana odpowiedź (ani żadna inna odpowiedź) nie działała dla mnie, ale to:
img {outline:1px solid transparent;}
źródło
Mam problem z gradientem CSS3 z -45deg.
background
Pochyły, był źle postrzępione podobna, ale gorzej niż oryginalny post. Więc zacząłem grać z obubackground-size
. To wydłużyłoby postrzępienie, ale wciąż tam było. Wtedy oprócz Czytałem, że inni ludzie mają problemy także w przyrostach 45deg więc regulować od-45deg
do-45.0001deg
i mój problem został rozwiązany.W moim CSS poniżej,
background-size
początkowo był,30px
adeg
dla gradientu tła był dokładnie-45deg
, i wszystkie klatki kluczowe były30px 0
.źródło
Być może będziesz w stanie maskować postrzępienie za pomocą rozmytych cieni . Użycie opcji -webkit-box-shadow zamiast box-shadow sprawi, że nie wpłynie to na przeglądarki inne niż Webkit. Możesz jednak sprawdzić Safari i mobilne przeglądarki internetowe.
Wynik jest nieco lepszy, ale wciąż znacznie mniej dobry niż w przypadku innych przeglądarek:
źródło
Pomyślałem, że wrzucimy również nasze rozwiązanie, ponieważ mieliśmy dokładnie ten sam problem w Chrome / Windows.
Wypróbowaliśmy rozwiązanie @stevenWatkins powyżej, ale nadal mieliśmy „krok”.
Zamiast
Użyliśmy:
Dla nas to załatwiło sprawę 🎉
źródło
Dodanie następującego elementu na div otaczającego dany element naprawiło to dla mnie.
W moim przypadku poszarpane krawędzie pojawiały się wokół okna wideo.
źródło
Dla mnie to właśnie perspektywa CSS załatwiła sprawę:
Całkowicie nielogiczne w moim przypadku, ponieważ nie używam żadnych przejść 3D, ale mimo to działa.
źródło
Do płótna w Chrome (wersja 52)
Wszystkie wymienione odpowiedzi dotyczą obrazów. Ale mój problem dotyczy płótna w chromie (wer. 52) z obracaniem transformacji. Stały się postrzępione i wszystkie te metody nie mogą pomóc.
Rozwiązanie, które działa dla mnie:
Tak ważne bloki kodu:
Przykład: https://jsfiddle.net/tLbxgusx/1/
Uwaga: istnieje wiele zagnieżdżonych div, ponieważ jest to uproszczona wersja mojego projektu.
Ten problem został odtworzony również dla Firefoksa . Nie ma takiego problemu w Safari i FF z siatkówką.
I inne rozwiązanie założony jest umieszczenie płótna do div samej wielkości i mają zastosowanie następujące css do tego div:
I obrót należy zastosować do tego zawijającego div. Tak wymienione rozwiązanie działa, ale z niewielką modyfikacją.
Zmodyfikowanym przykładem takiego rozwiązania jest: https://jsfiddle.net/tLbxgusx/2/
Uwaga: Zobacz styl div z klasą „trzecią”.
źródło