Przesuwanie po przejściu CSS w Safari rozjaśnia określony kolor czcionki

Question

W moim CSS zdefiniowałem przejście dla klasy. Z jakiegoś powodu, po najechaniu kursorem na klasę z przejściem, transition-duration z jakiegoś powodu zmienia kolor czcionki w innym miejscu (tworzą zastępcze i określone linki). (Dzieje się tak tylko w Safari ile mogę powiedzieć.)

Oto jsFiddle który pokazuje, co mówię:

http://jsfiddle.net/EJUhd/

Czy ktoś wie dlaczego tak się dzieje i jak można zapobiec to?

Answer 1

Miałem problemy z podobnym problemem. Dla mnie losowe linki na całej stronie stały się wyraźnie odważne (wyraźnie coś wspólnego z OSX i wygładzaniem w Safari, ponieważ Chrome (w Windows 7 i OSX), a także ta sama wersja Safari w Windows działało dobrze.

rozwiązanie nie jest oczywiste, w zależności od tego, co robisz, może nie być optymalna, ale dodanie tego wiersza kodu naprawił problem:

-webkit-transform: translateZ(0); 

zasadniczo wyzwala GPU zrobić animację, a tekst nie na mojej stronie znajdowały się artefakty, ale pamiętaj, że nie zawsze jest to właściwe, ponieważ mogą one dłużej używać baterii i zużywać więcej zasobów.Czasami jednak zużywa mniej, więc po prostu sprawdź wydajność, gdy ją dodasz.

Dodajesz to do normalnego stanu , a nie: aktywuj animację.

img { -webkit-transform: translateZ(0); } 

W przeciwieństwie do na:

img:hover { /* not here */ } 

Innym bardzo pozytywnym efektem ubocznym jest to, że w zależności od animacji robisz, to może być gładsze przez GPU. Więc nie dostaniecie poruszonej animacji, o której wspomnieliście w poście. W moim przypadku animacja była bardziej płynna w safari. Robiłem 120-procentową skalę i 5-stopniowy obrót obrazu z pojawieniem się w tym samym czasie cienia-pudełka. W mojej sytuacji nie zmniejszyło to zużycia procesora.

Answer 2

Nie mogę ci powiedzieć, dlaczego to robi, ale Safari nie zmienia twojego koloru tekstu, inaczej wygładza tekst w czasie, gdy przejście jest w ruchu. Krawędzie tekstu stają się gładsze, a sam tekst staje się cieńszy. Jest to szczególnie widoczne w przypadku powiększania skrzypiec za pomocą narzędzi ułatwiających dostęp. W niektórych mniejszych rozmiarach również przesuwa się cieniowanie wokół przycisku obok tekstu formularza. (Czy jest możliwe, że Safari przerysowuje niektóre rzeczy lub zmienia orientację na poziomie subpikseli podczas przejść?) Niech ktoś to wyjaśni, proszę, doprowadza mnie to do szału!)

Ponieważ nie mam pojęcia, dlaczego to robi albo może nie są to najlepsze rozwiązania:

W zależności od transformacji zastąpienie transformacji css animacją javascript prawdopodobnie to naprawi.
Na przykład w skrzypcach problem wystąpił również przy transformacji skali, ale nie przy użyciu podobnej funkcji animacji jQuery.

Wygląda na to, że istnieją pewne odcienie i style, w których zmiana wygładzania jest mniej oczywista (przynajmniej w skrzypcach), więc można również spróbować inaczej stylizować symbole zastępcze i inny efekt.
(Ten wątek może pomóc w stylizacji zastępcze, jeśli pójdziesz tą drogą: Change an HTML5 input's placeholder color with CSS)

Answer 3

Dzięki identyfikacji antyaliasingu powyżej, jak również pomoc z poniższych artykułów, zmodyfikowałem mój kod zawierać translate3d(0,0,0) problem zniknął:

-webkit-transition-duration: .17s, .17s translate3d(0,0,0); 

Przejście nie jest tak gładkie jak kiedyś, ale jest to temat na kolejne pytanie.

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

http://johanbrook.com/design/css/a-fix-for-antialiasing-issues-in-webkit-browsers/

http://www.webkit.org/blog/386/3d-transforms/

Answer 4

Miałem ten sam problem, podczas gdy jakiś tekst stał się antyaliasowany. dzieje się tak tylko w tekście kotwiczącym, które są pozycjonowane względem ez indeksem Z wewnątrz umieszczonego elementu i samym indeksem Z. jeśli usunę pozycję i indeks, problem zniknie.

Answer 5

Nie ma więcej istotnych tematów, które znalazłem w odniesieniu do problemu, który miałem, ale jest to związane z wyżej wspomnianym problemem. Tak, może być pomocne dla kogoś.

W dwóch słowach: Mam trochę kontenera (popup), jakiś element w środku. Pojawia się następująco: tło kontenera blaknie do ciemności poprzez krycie, a element wewnątrz jest skalowany (jak zbliżanie się do nas od tyłu). Wszystko działa świetnie wszędzie, ale nie w Safari (Mac/Win/iPhone). Safari "początkowo" pokazuje mój kontener, ale miga w dziwny sposób (pojawia się malutki krótki błysk).

Tylko dodawanie -webkit-transform: translateZ (0); (do kontenera !!!) pomogły.

.container { 
    -webkit-transform: translateZ(0); /* <-- this */ 
} 

.container section { 
    -webkit-transform: translateZ(0) scale(.92); /* <-- and I added translate here as well */ 
    -webkit-transition: -webkit-transform .4s, opacity .3s; 
    opacity:0; 
} 

.container.active section { 
    -webkit-transform:translateZ(0) scale(1); 
    -webkit-transition: -webkit-transform .3s, opacity .3s; 
    opacity:1; 
} 

---

Ale mówiąc o przejściach, nie było również część kodu:

.container { 
    ... 
    top:-5000px; 
    left:-5000px; 
    -webkit-transition: opacity .5s, top 0s .5s, left 0s 5s, width 0s 5s, height 0s 5s; 
} 
.container.active { 
    -webkit-transition: opacity .5s; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

zważywszy, że chcę, aby pokazać/ukryć okienko używając tylko przełączanie css (a także aby zniknął ładnie zamiast "pokaż: brak").

, więc w jakiś sposób na pojawiającym się Safari (oczywiście) dziedziczyłem właściwości przejścia oprócz "krycia", mimo że przeciąłem je tylko -webkit-transition: opacity .5s;

tak, dodając następujące rozwiązania problemu:

.container { 
    ... 
    -webkit-transition: opacity .5s, top 0s 0s, left 0s 0s, width 0s 0s, height 0s 0s; 
} 

Answer 6

istnieje podobny problem, stosując transition i translate3d. Czasami dowolny element na stronie z stylami :hover pokazuje zachowanie wskaźnika myszy. Mam ten problem za pomocą suwaka. Umieść element -webkit-transform: translateZ(0); w elemencie :hover, a jego zachowanie jest normalne.

Answer 7

Dla obrotu() Może to dobrze, ale na skalę () To nie pracował formułę -webkit-transform: translateZ(0);.

użyłem:

-webkit-font-smoothing: antialiased;