Конфликт transform: skew и transition

Question

[Ксения]

Здравствуйте, господа!
Есть html код следующей структуры :

<a> 
<div>
<img />
</div>
</a>

На элементе a висит свойство
transform: skew(-30deg)
при наведении на него у div'a появляется свойство
transition: all 0.5s;

НО! При наведении изображение на секунду смещается, а потом возвращается на своё место. Если убрать свойство
transform: skew(-30deg),
то смещение при наведении не наблюдается.
Очень бы хотелось избавиться от такого вот "скачка".
Прошу помочь решить данную проблему.
Ниже прилагаю видео для наглядности :

https://vk.com/video6281172_168395233

Comments

[Константин Довнар]

Лучше бы не видео выложили, а код полностью. :)

[croupier]

Вы бы вместо видео лучше выложили пример куда-нибудь типа jsfiddle.net/, где можно "поиграться". Можно было бы, например, быстро проверить не является ли всему виной блочный элемент внутри инлайнового. Я думаю, так бы значительно больше людей откликнулось.

Hint: doctype html5 позволяет писать тэги типа img так

[croupier]

*так - это без "/" , тэг съел парсер

Answer 1

[kaluzhanin]

Попробуйте добавить

-webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 -ms-backface-visibility: hidden;

Это решает многие проблемы с transition и transform

Comments

[Ксения]

спасибо, то, что нужно

Answer 2

[starosta6123]

В строке для div, попробуйте указать не "all", а нужное свойство, которое должно трансформироваться, например, transition: opacity 0.5s;

P.S.
А вообще, что-то меня смущает включение <div> в <a>. Мне кажется семантически будет лучше <span> со стилем: display: block;

Comments

[Ксения]

Уже пробовала заменить all на opacity, результат не меняется.