Сообщение от Pavel M.
|
даже пример №1, если запускать скрипт не сразу а по загрузке DOM у меня выполнился в Opere и FF
http://javascript.info/play/BdI6cc
использовал jQuery, так как кроссбраузерная функция длинная
возможно и в других примерах стоит скрипт меняющий css у красного кружка запускать по DOM ready ?
|
Pavel M. , загрузка дерева не гарантирует того, что стили применятся на разных отрисовках. Я включил ещё 2 браузера в фоне, музыку и киношку и нажал на Ctrl+F5 (обновить страницу без кеша). Потом попробовал F5 - обновит страницу с учётом кеша. В файрфоксе
2 из 3 раз шарик не анимировался. В опере это решило проблему, но как мне кажется, не для пользователей на слабых машинах.
----------------------------------------------------------
В общем, я нашёл решение для Оперы и Файрфокса! Дело было вовсе и не в обработке события перерисовки (его только FF умеет обрабатывать).
Короче говоря, я решил багу с помощью корявой проверки по requestAnimationFrame (для оперы - просто по таймауту). Там я в функции проверял с помощью закешированного в переменной вычисленного стиля (computedStyle) элемента, не применились ли к нему правила из таблицы стилей ?
В общих чертах, код выглядит как-то так :- вычислить префикс правил для браузера.
- в таблицу стилей добавить начальные свойства, а так же правило перехода (transition)
- в переменной сохранить вычисленный стиль элемента
- по какому-то интервалу проверять, применилось ли к нему хотя бы одно правило из добавленных в шаге № 2.
- если хотя бы одно уже применилось - добавляем в таблицу стилей новое правило с конечным стилем.
добавил комментов в коду.. пример сделал в
примерочной.