位置：修复在 Chrome 和 IE 中关闭画布菜单时效果不佳的问题

Posted 2023-02-22

【中文标题】位置：修复在 Chrome 和 IE 中关闭画布菜单时效果不佳的问题

【英文标题】：position:fixed not playing nice with off canvas menu in Chrome and IE

【发布时间】：2015-06-20 01:58:55

【问题描述】：

目的

我正在使用 off canvas menu，使用 CSS 和 javascript。画布外菜单按预期工作。我想要一个位于屏幕左侧并在触发菜单时移动的侧边栏菜单。这个想法是有一个 100 像素宽的菜单触发器，高度为 100%，并且始终位于屏幕左侧。使用绝对位置我在所有浏览器上的高度都有问题，使用固定位置 Firefox 工作正常，但遇到下面提到的问题。

错误

Firefox 问题： 据我所知，没有。

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

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

jsFiddle

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

截图

值得一提的 HTML 代码（Fiddle 中的完整代码）

<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 代码（Fiddle 中的完整代码）

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%

【问题讨论】：

截图和小提琴不匹配...不确定小提琴在演示什么

截图取自开发站点。如果您在 chrome 或 Internet Explorer 中加载小提琴，您可以复制屏幕截图中显示的相同问题..

chrome 对我来说很好，但我在 Linux 上，所以它可能会给出不同的结果

您是否向下滚动然后展开菜单？

【参考方案1】：

这是一个只需要很少更改的解决方法。

它在最新版本的 FF、Chrome 和 IE11/10 中始终如一地工作。

Updated Example

.sbContent-one 
  overflow: visible;       /* Or remove overflow-x: hidden */

.sbMainContent 
  overflow-x: hidden;

.sbMenuTrigger 
  position: static;        /* Or remove position: fixed */

在 Chrome 中解决问题的最简单方法是将 overflow 从 .sbContent-one 移动到 .sbMainContent。这样做时，您实际上不能滚动过去 .sbMenuTrigger 元素（这解决了问题），因为 .sbMainContent 是同级元素。

目前在浏览器中有many inconsistencies 围绕fixed 元素如何positioned relative to elements 是transformed using translate3d。 IE 中的问题是由于fixed 元素相对于窗口定位，而没有考虑使用translate3d 转换的元素。要解决此问题，请完全避免固定定位，并通过删除 position: fixed（或使用默认的 position: static 覆盖它）将元素 .sbMenuTrigger 添加回正常流程。这样做时，侧边栏会按预期展开。

换句话说：

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

【讨论】：

感谢大家提供有效的解决方案。我已授予 Josh 奖励，因为我相信该解决方案符合我的要求，同时解释了它不起作用的原因。其他人加1！谢谢！

@bybe 谢谢。我刚刚开始了另一项赏金，将奖励给乔，因为他的解决方案也很有效。

嘿，我刚刚在 Safari 6 和 7 上对其进行了测试，似乎菜单正在从某个地方获取 margin:56px ... 使用 .sbContainer margin-left 56px 解决了菜单打开时的问题，但是当它关闭时打破它。哎呀！为什么浏览器不能相同：P

【参考方案2】：

这是我对您的问题的解决方案。在 3 个市长浏览器上测试，运行良好！

see fiddle

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

从.sbContent-one中删除相对位置 将高度：100% 添加到 .sbContent-two（新规则） .sbMainContent 的主要变化 .sbMenuTrigger 的绝对位置

主要问题是：

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

【讨论】：

不知道为什么有人不赞成这个.. 有一个赞成票 1+.. 它主要是有效的，尽管现在有一点警告你已经删除了 position: relative.. 如果你比较 your fullscreen example VS OP's fullscreen example，您将看到文本 “向下滚动并展开菜单以查看问题” 的定位现在已关闭。我很确定 OP 希望保持该相对定位。

@JoshCrozier 那是因为 JS fiddle 标头和 iframe。如果您设法打开一个干净的版本，您会发现它运行良好。我还建议清理一些我认为不必要的样式，这就是我包含更多更改的原因。

【参考方案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;

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

【讨论】：

解决了这个问题，但不喜欢使用负边距或头寸的想法。另外不确定您做了什么，但菜单无法在您的 Fiddle 上关闭。

负边距不是问题，当所有东西都固定宽度时，无法关闭，可能是移动HTML的问题？