Question

我正在尝试创建类似于Google Plus应用程序的offcanvas菜单。

基本上，我的代码几乎适用于所有设备（android / ios）和浏览器（ff，chrome，IE8 +）

我遇到的唯一问题是在运行Android 4.1.2的三星Galaxy Tab 3上：如果我激活右侧暗/不透明层的不透明度过渡，关闭菜单时不会隐藏offcanvas菜单......它完全破坏了我的应用程序。

在Android 4.1.2上看到这两个小提琴：

无效：http://jsfiddle.net/F3BPw/3/
有效但我禁用了不透明度转换（我需要）：http://jsfiddle.net/F3BPw/2/

相关的CSS代码（这里是SASS版本，jsfiddle上的CSS版本）：

ps：看到两条过渡行评论，出现错误如果我退出它们

html, body {
    overflow-x: hidden;
    /*height: 100%;*/
}

.sidebar-offcanvas {
    height: 100%;
    position: absolute;
}

a[data-toggle=offcanvas]:focus {
    outline: none;
}

$global-site-min-height: 520px; /*TODO: replace this by better css or JS*/
#sidebar {
    padding-left: 0;
    padding-right: 0;
    min-height: $global-site-min-height;
    background-color: lighten($gray-light, 30%);

    .left-sidebar {
        padding: 0 15px;
    }
}

#rightpanel {
    height: 100%;
    min-height: $global-site-min-height;
    padding-left: 0;
    padding-right: 0;
}

.wrapper {
    overflow: hidden;
}

.row-offcanvas {
    position: relative;
}

@media screen and (max-width: $screen-xs-max) {

    $sidebar-width: 40%;

    #togleSidebar {
        display: block;
    }

    .sidebar-offcanvas {
        @include transition(left 0.15s linear, opacity 0.15s linear);
        height: 100%;
        z-index: 9500;
        top: 0;
        width: $sidebar-width;
        left: -$sidebar-width;
    }

    #rightpanel-shadow {
        background: #000 !important;
        position: absolute;
        width: 100%;
        height: 100%;
        visibility: hidden;
        @include opacity(0);
        z-index: 9250;
        @include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
    }

    .active {
        .sidebar-offcanvas {
            left: 0;
            @include box-shadow(6px 0px 6px -2px #111111);
            @include transition(left 0.15s linear, opacity 0.15s linear);

        }

        #rightpanel-shadow {
            visibility: visible;
            @include opacity(0.75);
            transition-delay: 0s;
            zoom: 1;
            @include transition(opacity 0.15s linear); /* SECOND FIDDLE WORKS IF COMMENTED*/
        }
    }
}

Answer 1

尝试避免多个动画声明，例如

transition: left 0.15s linear, opacity 0.15s linear;

而是添加一个新的嵌套元素并为其提供另一个动画。

三星默认浏览器真的不适合多个动画（直到v4.0 Android完全无法处理这个，现在三星浏览器仍然运行非常旧的代码）。

Offcanvas - Android 4.1.x上的CSS转换错误

1 个答案: