Форум программистов, компьютерный форум, киберфорум
HTML5: мобильные приложения
Войти
Регистрация
Восстановить пароль
 
Нарушитель
9 / 10 / 1
Регистрация: 22.01.2010
Сообщений: 46
1

Не отрабатывает js/css в ряде браузеров под мобильные устройства

05.06.2019, 17:10. Просмотров 1036. Ответов 0

Должен признаться, вопрос мой не совсем в контексте разработки мобильных приложений. А - всего лишь об отображении одного из интерактивных элементов странички на экране смартфонов (сайт сверстан сейчас на четвертом bootstrap, ruby on rails; без проблем опубликовал бы ссылку, да модераторы здесь ругаются). Буду рад, если поделитесь мнением относительно небольшой проблемы.

В трех словах, для анимации использован liffect.js, скрипт и стили публикую далее.

Вопрос же заключается в том, что не могу локализовать, в каких именно браузерах на мобильных девайсах (на ПК все OK, Chrome, FF - без проблем, IE - не нужен) картинки и/или анимация отображаются более-менее корректно, а в каких - нет. Закономерности уловить не могу, не фронтенд и уж тем более крайне мало понимаю в особенностях мобильной разработки. В чем здесь может быть причина некорректного отображения, скажите? Возможно ли что-нибудь предпринять адекватное? Я мог бы попробовать переделать таблицу - в грид под бутстрап, но не думаю, что это поможет: изображения не видны в некоторых мобильных браузерах, а в некоторых - отображаются вполне нормально.

P.S. В Chrome по F12 - OK.


Javascript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {
    $("ul[data-liffect] li").each(function (i) {
        $(this).attr("style", "-webkit-animation-delay:" + i * 300 + "ms;"
                + "-moz-animation-delay:" + i * 300 + "ms;"
                + "-o-animation-delay:" + i * 300 + "ms;"
                + "animation-delay:" + i * 300 + "ms;");
        if (i == $("ul[data-liffect] li").size() -1) {
            $("ul[data-liffect]").addClass("play")
        }
    });
});


CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
ul[data-liffect="pageBottom"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: pageBottom 600ms ease both;
    -webkit-animation-play-state: paused;
    -webkit-transform-origin: 50% 100%;
    -moz-animation: pageBottom 600ms ease both;
    -moz-animation-play-state: paused;
    -moz-transform-origin: 50% 100%;
    -o-animation: pageBottom 600ms ease both;
    -o-animation-play-state: paused;
    -o-transform-origin: 50% 100%;
    animation: pageBottom 600ms ease both;
    animation-play-state: paused;
    transform-origin: 50% 100%;
    display: inline-table;
}
 
ul[data-liffect="pageBottom"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}
 
@-webkit-keyframes pageBottom {
    0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); }
}
 
@-moz-keyframes pageBottom {
    0% { opacity: 0; -moz-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -moz-transform: perspective(400px) rotateX(0deg); }
}
 
@-o-keyframes pageBottom {
    0% { opacity: 0; -o-transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; -o-transform: perspective(400px) rotateX(0deg); }
}
 
@keyframes pageBottom {
    0% { opacity: 0; transform: perspective(400px) rotateX(-90deg); }
    100% { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.06.2019, 17:10
Ответы с готовыми решениями:

Кнопки под мобильные устройства
В инете что-то не очень богатый выбор, поэтому иногда приходится рисовать самому при помощи...

Верстка под мобильные устройства
Всем привет! Поделитесь пожалуйста опытом и интересными статьями на тему верстки под мобильные...

Адаптация под мобильные устройства
Всем привет, столкнулся с таким вопросом: изменяю шрифт в медиа запросе, когда делаю это в браузере...

Сайт под мобильные устройства
Привет Всем! Народ подскажите пожалуйста как сделать так что бы вот такой вот стандартный сайт...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.06.2019, 17:10

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Вёрстка под мобильные устройства
Не подскажите как это вообще? :) или можете скинуть пожалуйста информацию, где её взять про эту...

Адаптация под мобильные устройства
Доброе время суток. Не получается адаптировать под мобильные устройства хедер сайта А именно...

Верстка под мобильные устройства
Добрый вечер. возникла такая проблема сверстал ландинг : ссылка) под разными браузерами все...

Сайт под мобильные устройства
Добрый вечер друзья Интересует такой вопрос на странице у меня присутствует слайд Как можно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.