Offcanvas - Android 4.1.x上的CSS转换错误 [英] Offcanvas - CSS transition bug on Android 4.1.x

问题描述

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

I'm trying to create a offcanvas menu similar to Google Plus app's one.

基本上，我有一个几乎在所有设备上工作的代码（android / ios）和浏览器（ff，chrome，IE8 +）

Basically, I have a code working on almost all devices (android/ios) and browsers (ff, chrome, IE8+)

我唯一的问题是在运行Android 4.1.2的三星Galaxy Tab 3：如果我激活不透明度转换黑暗/不透明层在右边，offcanvas菜单将不会隐藏时关闭菜单...它完全打破了我的应用程序。

The only problem I have is on a Samsung Galaxy Tab 3 running Android 4.1.2 : if I activate the opacity transition of the dark/opaque layer on the right, the offcanvas menu won't hide when closing the menu ... and it totally breaks my app.

在Android上看到这两个fiddles 4.1.2：

See this two fiddles on Android 4.1.2 :

• 无效： http://jsfiddle.net/F3BPw/3/

我需要）： http://jsfiddle.net/F3BPw/2/

相关CSS代码（此处为SASS版本，jsfiddle上的CSS版本）：

Related CSS code (SASS version here, CSS version on jsfiddle) :

ps：看到两个转换行注释，bug出现如果我分解它们

ps: see the two transitions lines commented , the bug appears If I decomment them

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*/
        }
    }
}

推荐答案

尝试避免像

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

而是添加一个新的嵌套元素并赋予其他动画。

Instead add a new nested element and give it the other animation.

三星默认浏览器确实不能很好地与多个动画（直到v4.0 Android完全无法处理这一点，现在三星浏览器仍然运行非常旧的代码）。

Samsung default browser really doesn't do well with multiple animation (Until v4.0 Android was totally unable to handle this, nowadays Samsung browser still runs VERY old code).

这篇关于Offcanvas - Android 4.1.x上的CSS转换错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！