Obraz skacze (ma Parkinsona) przy skalowaniu obrazu za pomocą css transition

0

Docelowo chcę aby mając obraz się powiększał i zmniejszał BEZ ŻADNEGO SKAKANIA tak jak thumbnails w tej galerii:
http://themes.themegoods2.com/keres/gallery-4-columns/

W swoim dokumencie (linki poniżej) wpisałem kod wszystko jak należy no i niestety u mnie w hover state obraz wskakuje do docelowego rozmiaru, zdejmuje z niego kursor też skacze. Po przeładowaniu strony TYLKO za 1wszym razem działa jak należy, prawie każdy kolejny raz fika od razu do docelowego rozmiaru. Najlepiej zobaczyć to w praktyce:

http://www.cssdesk.com/ThGXH

Chodzi o ten czerwony kwadrat który skacze jakby miał Parkinsona zarówno kiedy się na niego najeżdża jak i zdejmuje z niego kursor. Najlepiej to widać jak się szybko kursor raz najeżdża, raz zdejmuje z kwadratu.

0

Dodaj mu wyjściowy transform: scale(1).

Btw. po to macie dev tools, zeby podejrzec jak to jest zrobione :) Polecam sie zapoznac jak to dziala, bo czesto potrafi nam to zaoszczedzic mase czasu.

0

Po wpisaniu w div -webkit-transform: scale(1); i -moz-transform: scale(1); W mozilla działa ten kod, w chrome zdarza się że skacze nie powinno W OGÓLE skakać.

Zastanawiam się czy oni w tej galerii nie dali jeszcze jakiegoś javascriptu:
http://themes.themegoods2.com/keres/gallery-4-columns/

0

W chrome dodanie -webkit-transform: scale(1); nic nie zmienia, nadal skacze więc to wina przeglądarki (moja wersja to Wersja 44.0.2403.155 m), w firefox nawet bez dodania wyjściowego -moz-transform: scale(1); działa bez skakania. Coś musi być nie tak z obecną wersją Chrome... Kod jest przecież poprawny taki jak podałem w OP.

1

To jeden z tych bugów które są z nami od zawsze...
Dodaj do tego diva

-webkit-backface-visibility: hidden;
   	 backface-visibility: hidden;
0

_naf te backface-visibility: hidden; w moim chrome nic nie zmienia. Okazuje się że w obecnej wersji chrome jest jakiś bug dla którego nawet backface-visibility: hidden; nie poradzi. W mozilla natomiast moje CSS Transition z przykładu w OP działa jak w szwajcarskim zegarku

0

Ktoś wie dlaczego tak się dzieje jak na nagranym przeze mnie video? - to jest jakiś bug Chroma dla CSS Transitions?

Dodaję do hover state -webkit-backface-visibility: hidden; backface-visibility: hidden; i nie pomaga. W Firefox i IE działa poprawnie.

0

wrzuć na jsfiddle

0

Proszę oto link do jsfiddle http://jsfiddle.net/geredhg6/ - to jest to co na filmie video

0

@The_Visitor Mi działa normalnie. Jak jeszcze potrzebujesz to mogę ci dać inny kod.

1 użytkowników online, w tym zalogowanych: 0, gości: 1