位置：修正了Chrome和IE浏览器中的closurescanvas菜单

什么意图

我正在使用使用CSS和JavaScript的canvas菜单 。 canvas菜单按预期工作。 我想要一个边栏菜单在屏幕左边，并在菜单被触发时移动。 这个想法是有一个100px的菜单触发器，并具有100％的高度，始终在屏幕左侧。 使用绝对位置我有所有浏览器的高度问题，使用固定的位置Firefox工作正常，但遇到下面提到的问题。

错误

火狐问题：没有，据我所知。

Chrome浏览器问题：滚动几个像素后，边栏菜单触发器不能拉伸整个页面。

Internet Explorer：边栏菜单被触发时，边栏似乎完全消失。

的jsfiddle

因为我的代码在HTML，CSS和JavaScript上都很重，所以我包含了一个jsFiddle 。 请注意，就我所知，问题只发生在Chrome浏览器和Internet Explorer上。 您可以通过向下滚动页面，然后单击左侧的菜单button来复制问题。

截图

值得注意的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中解决问题的最简单的方法是简单地将.sbContent-one的overflow移动到.sbMainContent 。 这样做，你实际上不能滚动通过.sbMenuTrigger元素（这可以解决问题），因为.sbMainContent是一个兄弟元素。

目前，浏览器之间在fixed元素相对于 使用translate3d元素的位置方面存在许多不一致 。 IE中的问题是由于fixed元素相对于窗口定位而没有考虑到使用translate3d转换的元素。 为了解决这个问题，完全避免固定的定位，并通过删除position: fixed （或覆盖position: static ，默认值）来将元素.sbMenuTrigger添加回正常stream。 这样做，侧栏就像预期的那样扩展了。

换一种说法：

• 从.sbContent-one删除overflow-x: hidden （或者用overflow: visible覆盖它）。
• 将overflow-x: hidden添加到.sbMainContent 。
• 移除position: fixed从.sbMenuTrigger （或者用position: static覆盖它）。

Answer 2

这是我对你的问题的解决scheme。 testing3市长浏览器，它工作正常！

看小提琴

看看我在以下课程上的变化：

• 从.sbContent-one删除相对位置
• 将高度：100％添加到.sbContent-two （新规则）
• .sbMainContent重大更改
• .sbMenuTrigger绝对位置

主要问题是：

1. .sbContent-one和.sbMainContent不必要的位置相对和绝对位置。
2. 固定的位置是相对于窗口的，所以当你翻译元素的时候，它的行为在不同的浏览器上是不同的。

Answer 3

我设法使它在最后一个chrome / IE11上工作。

的jsfiddle

我感动了

  <div class="sbMenuTrigger" data-effect="sbFX"> <div class="sbMenuIcon"> <div class="sbMenuIconBackground"></div> <div class="sbMenuIconOverlay"></div> </div> <div class="sbMenuLogo"> <div class="sbMenuLogoBackground"></div> <div class="sbMenuLogoOverlay"></div> </div> </div> 

在<header>标签的末尾，CSS变成了：

 .sbMenuTrigger { background-color:#b23445; cursor:pointer; width:100px; position:absolute; right:-100px; top:0; bottom: 0; } 

所有浏览器并不总是欢迎固定+变换的位置。