Перемещение схемы преобразования CSS в WebKit (возможно, вызвано кэшированием макета?)

Question

Я пытаюсь использовать преобразования CSS на элементе, чтобы центрировать абсолютно позиционированное изображение, чтобы я мог перемещать позицию из центра влево. Это базовый код (с префиксами поставщика во всех комбинациях), которые я использовал.

position: absolute; 
left: 50%; 
height: 100%; 
transform: translateX(-50%); 
transition: transform 1s, left 1s; 

А затем при наведении изменяются следующие свойства.

left: 0; 
transform: translateX(0%); 

Все это работает отлично, но проблема начинается, когда высота обертки также изменяется во время перехода. Кажется, что WebKit кэширует ширину элемента из того, что было до этого, при переходе к элементу, и потому что изменение ширины/высоты во время перехода, как только оно достигает конца перехода, оно перескакивает туда, где оно принадлежит. Вот JSFiddle, который показывает мою проблему. Он отлично работает в Firefox и IE10, но браузеры на базе браузера Chrome, Safari и Opera, основанные на WebKit, имеют макет в конце поворота.

JSFiddle Example

Я провел последние несколько дней, пытаясь все, что я мог придумать, чтобы обмануть WebKit в себя правильно, с добавлением дополнительных свойств CSS, переходов, анимации и даже вызывая оплавление на элементе с помощью requestAnimationFrame и таймеры, но ничего не помогает. Я был бы очень благодарен всем, кто может предложить решение.

Answer 1

Это, по-видимому, было ошибкой в ​​реализации префиксной реализации CSS-переходов, где он предварительно вычисляет цель и не обновляет ее после перезарядки. Он больше не встречается в версии с префиксом в новых версиях WebKit.