Скрипт не работает в хроме и сафари

[dobro]

Привет!

Подскажите, пожалуйста, в чем может быть проблема, http://son.topdetal.com.ua/mobi/по клику на пункты меню скриптом открывается блок с контентом этого пункта, и вот в хроме почему-то открывается через раз, в сафари вообще не открывается, в других браузерах нормально.

[Нарек]

Ну во первых, первым делом надо убрать клик по ссылке (#). 

[dobro]

Ну во первых, первым делом надо убрать клик по ссылке (#). 

В смысле вообще на кнопках не должно быть ссылок?

[Нарек]

Нет, в смысле надо запретить переход по ссылке например с помощью event.preventDefault();

[Igor Schnaider]

.one('animationend webkitAnimationEnd oAnimationEnd msAnimationEnd', ...

Chrome поддерживает сразу и webkitAnimationEnd, и animationend. Opera вроде бы тоже. Копайте в эту сторону.

 

По крайней мере, у меня сначала срабатывает animationend, а во второй раз webkitAnimationEnd:

..., function (e) {   $(this).removeClass('slidePageLeft').removeClass('openpage');   console.log(e.type);});

Edited December 11, 2015 by Igor Schnaider

[dobro]

.one('animationend webkitAnimationEnd oAnimationEnd msAnimationEnd', ...

Chrome поддерживает сразу и webkitAnimationEnd, и animationend. Opera вроде бы тоже. Копайте в эту сторону.

 

По крайней мере, у меня сначала срабатывает animationend, а во второй раз webkitAnimationEnd:

..., function (e) {   $(this).removeClass('slidePageLeft').removeClass('openpage');   console.log(e.type);});

Спасибо, помогло!))

 

Но вообще не работает в сафари и мобильной опере, можете по этому поводу что-то посоветовать?

Edited December 11, 2015 by dobro

[Igor Schnaider]

В Opera, думаю, дело все в том, что 3d-transforms не работают (смотрел через эмулятор), а ваш скрипт убирает этот большой pop-up только через прозрачность, а display остается в block. В остальных браузерах он просто сворачивается обратно, вот и не перехватывает щелчки, а в опере, как сказал уже, он постоянно сверху, поэтому и щелкаете по нему.

 

p.s. Возможно, в Safari та же проблема, я не стал смотреть :-)

 

upd.

Если ставить opacity: 1 непосредственно через скрипт, то в опере плашка появляется.

В общем, нашел методом тыка:

.openpage {    ...    animation: rotatePageInFromRight 1s cubic-bezier(0.66, 0.04, 0.36, 1.03) 1 normal forwards;}

Если вместо значения 1.03 поставить просто 1, то норм все. Предположу, что мобильная opera не допускает выход значений animation-timing-function из диапазона [0; 1].

 

В общем, надо разбираться ;-)

Edited December 11, 2015 by Igor Schnaider

[kattiperk]

Извиняюсь, dobro , это ли не тестовое задание?

[dobro]

Извиняюсь, dobro , это ли не тестовое задание?

Да, оно, и тем не менее проблемы с ним все те же)) Буду благодарен если поможете решить)