CSS3 переход влияет на родительский div

Question

Я пытаюсь выяснить, почему этот переход CSS3 влияет на родительский div:

http://jsfiddle.net/BpUqt/5/

Я пытаюсь переместить объект в div без изменения высоты.его родительского div.

Но что происходит, так это то, что высота блока уменьшается на 1px каждый раз, когда переход начинается / заканчивается (с рамкой или без нее)

Хотя я хочу использовать триэто подряд мой контент начинает подпрыгивать, если пользователь слишком быстро наводит курсор на эти элементы.

Установка фиксированной высоты не подходит, поскольку я работаю над адаптивным макетом.

Answer 1

Хорошо, вот простой обходной путь.Просто добавьте отрицательное поле, и оно будет работать:

http://jsfiddle.net/BpUqt/12/

Вот как это выглядит на самом деле (минимальная версия):

http://jsfiddle.net/sSjQt/

Answer 2

Вместо поля анимации (что означает, что высота блока должна быть пересчитана, поэтому ошибки округления на частичных пикселях вызывают движение), используйте преобразования.

Также помните, что IE10 имеет переходы, поэтому используйте также префикс ms.

Посмотрите на http://jsfiddle.net/BpUqt/10/