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

rishard · Регистрация: 22.01.2010

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

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

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

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

Javascript

$(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

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); }
}

Опции темы