CSS3转换不能正确地在android上运行

时间:2013-05-16 11:06:52

标签: css3 less css-transitions

任何人都可以在下面的代码中看到任何会导致Android问题的内容吗?

在Android上,当代码被使用时,它在第一次尝试时失败,给出一个空白屏幕,然后如果再次点击它就可以工作。

.csstransforms.csstransitions.js #nav {
    left: 0;
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    .backface-visibility(hidden);
}

.csstransforms.csstransitions.js #inner-wrapper {
    left: 0 !important;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    .backface-visibility(hidden);
}

.csstransforms.csstransitions.js-nav #inner-wrapper {
    -webkit-transform: translate(70%, 0) scale3d(1, 1, 1);
    -moz-transform: translate(70%, 0) scale3d(1, 1, 1);
    -ms-transform: translate(70%, 0) scale3d(1, 1, 1);
    -o-transform: translate(70%, 0) scale3d(1, 1, 1);
    transform: translate(70%, 0) scale3d(1, 1, 1);
}

我应该提一下,我正在使用LESS mixins,所以背面部分是:

.backface-visibility (@backface) {
    -webkit-backface-visibility: @backface;
    -moz-backface-visibility: @backface;
    -ms-backface-visibility: @backface;
    -o-backface-visibility: @backface;
    backface-visibility: @backface;
}

非常感谢任何帮助。

0 个答案:

没有答案