位置:修复了在Chrome和IE中关闭画布菜单时不能很好玩

Question

是什么意思

我正在使用CSS和JavaScript 的非画布菜单.画布外菜单按预期工作.我想要一个侧边栏菜单,它位于屏幕左侧,并在触发菜单时移动.我们的想法是拥有一个100px的菜单触发器,其高度为100%,并且始终位于屏幕左侧.使用绝对位置我在所有浏览器上都有高度问题,使用固定位置Firefox工作正常,但遇到下面提到的问题.

错误

Firefox问题:没有,据我所知.

Chrome问题:向下滚动几个像素后,侧边栏菜单触发器不会拉伸整个页面.

Internet Explorer:触发侧边栏菜单时,侧边栏似乎完全消失.

的jsfiddle

因为我的代码在HTML,CSS和JavaScript上都很重要,所以我包含了一个jsFiddle.请注意,就我所知,此问题仅发生在Chrome和Internet Explorer上.您可以通过向下滚动页面然后单击左侧菜单按钮来复制问题.

截图

注意有用的HTML代码(小提琴中的完整代码)

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

注意有问题的CSS代码(小提琴中的完整代码)

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99;
    height:100%;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbPush::after {
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
    width:100%;
    height:100%;
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    visibility:hidden;
    width:244px;
    height:100%;
    background:#872734;
    -webkit-transition:all .5s;
    transition:all .5s
}
.sbMenu::after {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
    width:0;
    height:0;
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
    -webkit-transform:translate3d(300px,0,0);
    transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
    visibility:visible;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbFX.sbMenu::after {
    display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
    padding-left:244px
}
.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    height:100%;
    width:100px;
    position:fixed;
    left:0;
    top:0
}
.sbMainContent {
    margin-left:100px;
    width:calc(100% - 100px);
    top:0;
    padding-top:50px;
    position:absolute;
    height:100%
}

Answer 1

这是一个需要很少改变的解决方法.

它在FF,Chrome和IE11/10的最新版本中始终如一.

更新的示例

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

在Chrome中解决问题的最简单方法是简单地将overflowfrom .sbContent-one移至.sbMainContent.这样做,您实际上无法滚动.sbMenuTrigger元素(解决问题),因为它.sbMainContent是一个兄弟元素.

目前有许多不一致的跨浏览器围绕如何fixed元素相对于元素定位正在使用转化translate3d.IE中的问题是由于fixed元素相对于窗口定位而没有考虑使用translate3d转换的元素.要解决此问题,请完全避免固定定位,并.sbMenuTrigger通过删除position: fixed(或覆盖position: static默认值)将元素添加回正常流程中.在这样做时,侧边栏按预期扩展.

换一种说法:

• overflow-x: hidden从中删除.sbContent-one(或覆盖它overflow: visible).
• 添加overflow-x: hidden到.sbMainContent.
• position: fixed从中删除.sbMenuTrigger(或覆盖它position: static).

Answer 2

这是我的问题解决方案.在3个市长的浏览器上测试,它工作正常!

看小提琴

看看我对以下课程的更改:

• 从中删除相对位置 .sbContent-one
• 添加高度:100%到.sbContent-two(新规则)
• 重大变化 .sbMainContent
• 绝对的位置 .sbMenuTrigger

主要问题是:

1. 来自.sbContent-one和的不必要的位置相对和绝对位置.sbMainContent.
2. 固定的位置是相对于窗口的,因此当您翻译元素时,它的行为会因浏览器而异.