Шаткий переход ширины CSS3 в WebKit

Question

Я работаю над анимацией, используя упаковку. Плитки выровнены в сетке, и нажатие на одну из них должно увеличить ее и соответственно динамически переставить плитки. Изменение размера анимировано с помощью CSS3-переходов. Все это работает, как и ожидалось, в IE10 и Firefox, как показано в следующем коде: http://codepen.io/anon/pen/ilkmK

Тот же код в браузерах на основе WebKit (протестирован в Windows) вызывает яростное покачивание / встряхивание поля при его изменении размера и изменении положения.

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

На данный момент я использую версию JavaScript как немного лучший браузер fallbackf или webkit, но она не оптимальна. Я понятия не имею, куда идти отсюда, поэтому я надеялся, что Stackru поможет мне.

За любые советы о том, как заставить это работать в Chrome/Safari, я был бы очень благодарен.

Answer 1

Я только что попробовал это в Chrome на Mac, и он работает нормально, поэтому я не могу воспроизвести проблему. Однако у меня есть ощущение, что это может быть связано с тем, что когда веб-браузеры загружают страницу, они изначально генерируют изображения с 0 размерами.

Попробуйте положить свой JQuery в $(window).load(function(){ вместо $(document).ready(function(){

Это будет ждать загрузки изображений перед выполнением сценария.