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

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

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

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

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

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


person Bunkerbewohner    schedule 15.10.2013    source источник


Ответы (1)


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

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

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

person CaribouCode    schedule 15.10.2013
comment
Спасибо! К сожалению, проблема не в этом. Это не имеет никакого значения. Также оказывается, что эффект менее заметен на быстрых компьютерах. - person Bunkerbewohner; 15.10.2013
comment
OK. В этом случае я больше не могу вам помочь, так как не могу воспроизвести проблему. - person CaribouCode; 15.10.2013