Нестабилен преход на ширината на CSS3 в WebKit

Работя върху анимация с помощта на packery. Плочките са подравнени в решетка и щракването върху една трябва да я увеличи и динамично да пренареди плочките съответно. Преоразмеряването се анимира с помощта на CSS3 преходи. Всичко това работи според очакванията в IE10 и Firefox, както е показано в следния codepen: http://codepen.io/anon/pen/ilkmK

Същият код в базирани на WebKit браузъри (тестван на Windows) предизвиква неистово мърдане/клатене на кутията, докато се преоразмерява и позиционира.

Вече изпратих проблем и проблемът изглежда е, че преходите по ширина и височина в WebKit са не е оптимизиран. Прилагането на същата анимация с помощта на jQuery.animate подобри ситуацията малко, но не премахва мърдането. Особено при по-бавни системи остава много забележимо.

Засега използвам версията на JavaScript като малко по-добър резервен f или webkit браузър, но не е оптимален. Нямам представа къде да отида от тук, така че се надявах 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
ДОБРЕ. В такъв случай вече не мога да ви помогна, тъй като не мога да репликирам проблема. - person CaribouCode; 15.10.2013