Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.01.2012, 14:44
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Opera reflow bug
описание симптомов :

пытаюсь проанимировать элемент в опере, используя transitions.
в результате, когда применяется конечный стиль (после этого css-свойство должно измениться за указанное время), присваивание значения css-свойству происходит до перерисовки.

получается, что элемент не анимируется, а к нему применяется конечный стиль сразу.

Опытным путем выяснил, что задержка перед присваиванием конечного стиля в 1000мсек помогает. в 1, 10 и 100 мсек не помогает.

В связи с этим, у меня следующий вопрос : как отловить в опере событие перерисовки страницы? или как в ней назначить стиль элементу после перерисовки ?
Ответить с цитированием
  #2 (permalink)  
Старый 29.01.2012, 21:34
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

UP'аю тему. неужели никто не знает? гугл мне не помог.
Ответить с цитированием
  #3 (permalink)  
Старый 29.01.2012, 22:24
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

а событие transitionsend поддерживается?
----------------
гугл говорит OTransitionEnd
Ответить с цитированием
  #4 (permalink)  
Старый 29.01.2012, 22:34
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

не пойму о чем речь идет?
попробовал в опере пример с сайта mdn
http://jsfiddle.net/RwtHn/5/ хорошо работает
опера 11.61
Ответить с цитированием
  #5 (permalink)  
Старый 30.01.2012, 12:02
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Octane Посмотреть сообщение
а событие transitionsend поддерживается?
----------------
гугл говорит OTransitionEnd
в том дело, что оно не успевает сработать, т.к. конечный стиль стиль применяется до перерисовки.

Сообщение от Pavel M. Посмотреть сообщение
не пойму о чем речь идет?
попробовал в опере пример с сайта mdn
http://jsfiddle.net/RwtHn/5/ хорошо работает
опера 11.61
тоже. но это не то совсем. делается переход с помощью JS. полностью. без наводок мыши и кликов.

без примеров кода будет непонятно.

смотрите : пример № 1. стиль применяется сразу, как стал доступен элемент.

работает только в хроме (!). в мозилле, как и в опере, не успевает.

попробуем поставить таймаут, чтобы применить конечный стиль после перерисовки. пример № 2. теперь работает и в FF - таймаут помог применить конечные свойства стиля после перерисовки.

конечно, таймаут - гнилое дело. лёгким движением руки он заменяется на requestAnimationFrame : пример № 3.

но это не работает в опере.

в интернете есть замена этой функции другой, с таймаутом :
function( callback ){                 
     window.setTimeout(callback, 1000 / 60);  // 1000/60 == 16.6
};

код взят отсюда

попробуем использовать его. пример № 4. и о чудо, он работает в опере!

т.к. меня не интересует то, что стили применены изначально ( в <style> и прописаны человеком ), я введу генерацию стиля. пример № 5. для удобства проверки сгенерированные правила выводятся в консоль.

для оперы (из-за которой сыр-бор) генерируется такой CSS :
border-radius:50px;
width:50px;
height:50px;
background-color:#c00;
position:absolute;
top:0;
left:0;
*!*
-o-transition:all 1s;
*/!*


и в ней наконец-то всё хорошо! но есть одно "НО" : в FF если открыть последний пример, то скрипт опять применяет стиль до перерисовки. если запустить скрипт, уже открыв ссылку (Click to view), то всё хорошо. но если нажать F5, то при загрузке шарик не анимируется, а уже висит по середине страницы.

в это же время, в опере и хроме всё хорошо!

и ещё одно "НО"... для requestAnimationFrame для оперы ставится таймаут в 16 мсек. в своём скрипте (не в этом) я ставил таймаут в 1мсек - не помогало. Ставил 10мсек - тоже не анимируется. Даже 100мсек не помогало!
И только задержка в одну секунду (!) помогла опере применить transition к элементу и после назначения конечных css-правил таки проанимировать их изменение.

Чувствуете разницу ? 1000/60 и 1000.

Нужно как-то определить момент перерисовки в опере. Пытаться предугадать его с помощью таймаута - гнилое дело.

Последний раз редактировалось melky, 30.01.2012 в 12:05.
Ответить с цитированием
  #6 (permalink)  
Старый 30.01.2012, 14:07
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

даже пример №1, если запускать скрипт не сразу а по загрузке DOM у меня выполнился в Opere и FF
http://javascript.info/play/BdI6cc

использовал jQuery, так как кроссбраузерная функция длинная

возможно и в других примерах стоит скрипт меняющий css у красного кружка запускать по DOM ready ?
Ответить с цитированием
  #7 (permalink)  
Старый 30.01.2012, 14:08
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от 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) элемента, не применились ли к нему правила из таблицы стилей ?

В общих чертах, код выглядит как-то так :
  1. вычислить префикс правил для браузера.
  2. в таблицу стилей добавить начальные свойства, а так же правило перехода (transition)
  3. в переменной сохранить вычисленный стиль элемента
  4. по какому-то интервалу проверять, применилось ли к нему хотя бы одно правило из добавленных в шаге № 2.
  5. если хотя бы одно уже применилось - добавляем в таблицу стилей новое правило с конечным стилем.
добавил комментов в коду.. пример сделал в примерочной.

Последний раз редактировалось melky, 30.01.2012 в 14:14.
Ответить с цитированием
  #8 (permalink)  
Старый 01.02.2012, 10:43
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

вопрос по trasition
попробовал на горизонтальном скроллере картинок вместо js анимации
использовать transition, но кроме усложнения скрипта не заметил особых преимуществ. Визуально плавность прокрутки не возросла.

сейчас думаю, стоит игра свеч или transition лучше оставить для необязательных эффектов, которые полностью можно описать в css - там пока этой технологии место?
Ответить с цитированием
  #9 (permalink)  
Старый 01.02.2012, 10:56
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Pavel M. Посмотреть сообщение
вопрос по trasition
попробовал на горизонтальном скроллере картинок вместо js анимации
использовать transition, но кроме усложнения скрипта не заметил особых преимуществ. Визуально плавность прокрутки не возросла.

сейчас думаю, стоит игра свеч или transition лучше оставить для необязательных эффектов, которые полностью можно описать в css - там пока этой технологии место?
На одном-двух элементах этого заметно не будет. Вот, посмотрите, здесь анимируют много элементов, сначала через transitions, далее через $.animate. В хроме я вижу разницу.


PS ссылка взята из этой статьи
Ответить с цитированием
  #10 (permalink)  
Старый 01.02.2012, 11:07
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

спасибо, наглядный пример
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
screen.width в браузере opera cyklop77 Javascript под браузер 27 12.05.2018 01:03
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 12:03
Dojo и Opera Idb Dojo toolkit 4 25.06.2009 09:43
opera mobile demi Opera, Safari и др. 4 11.02.2009 11:22
Не возвращается XML-ответ в Opera после AJAX-запроса Yojik Общие вопросы Javascript 4 17.03.2008 05:56