Jerky CSS3 przejście w Firefox

Question

Próbuję zrobić proste znikną obrazu na rollover - działa dobrze i gładko w Chrome, ale Firefox jest nieco skoczna. Próbowałem wykonać sztuczkę backface-visibility na kontenerze, ale wciąż nie miałem szczęścia.

Ktoś ma jakieś pomysły?

JSFiddle

HTML

<div class="link-box large"> 
    <div class="image"> 

     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt=""> 
    </div> 
</div> 

CSS

.link-box .image img { transition: all .2s ease-out; width:200px; } 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; } 

Answer 1

Mój najlepszy przypuszczenie się, że ustawienie szerokości obrazu do 200px i pozostawiając wysokość nieokreśloną powoduje przeglądarka obliczyć wysokość obrazu. Jeśli wysokość wylicza się na niezłą liczbę całkowitą, nie stanowi to problemu. Jeśli wysokość zostanie obliczona jako dziesiętna, może to być przyczyną problemu. W tym przypadku naturalne wymiary obrazu to 275 na 183 piksele.

Zmieniając szerokość obrazu na 200px zmniejszamy obraz do 72,727272 ...% jego naturalnego rozmiaru.

275/200 = 0,727272 ... Lub jeśli wolisz frakcje: 275 (8/11) = 200

teraz uruchomione tego samego równania na rentowności Wzrost:

183 (8/11) = 133.090909 ...

Wygląda na to, że w normalnym trybie rzeczy częściowe piksele są przycinane, ale podczas przejścia częściowe piksele nie są przycinane, a obraz jest lekko wypaczony, aby pokazać częściowe piksele na tej samej wysokości.

Przycięte dół do 133px:

Nie przycięte i lekko wypaczone:

---

Teraz mamy dobrą hipotezę o tym, co jest przyczyną problemu, do rozwiązania:

Możesz dowolnie kodować wysokość obrazu:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    height: 133px; /* manually set the height */ 
} 

Lub jeśli raczej nie trudno kod wysokość, można również rozwiązać problem z krytym anti-alias hack, wystarczy dodać box-shadow.

Working Example

.link-box.large:hover .image img { 
    opacity: .65; 
    box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */ 
} 

lub jeśli jesteś zaniepokojony zgodności z różnymi przeglądarkami z użyciem box-shadow, można również użyć granicę transparent:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    border: 1px solid transparent; /* add transparent border */ 
} 

Answer 2

działa dobrze na moim Firefox.

W każdym razie możesz spróbować dodać specjalne atrybuty, które przygotują przeglądarkę do przejścia i faktycznie wyrenderują element z możliwą transformacją.

Taka cecha jest transform: translate3d(0,0,0);

Jak to:

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    transform: translate3d(0,0,0); 
} 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; }