jquery - 带有 anchor 链接的谷歌浏览器的奇怪行为？

Question

好的，我正在制作一个响应式网站，其中包含 Canvas 外 Accordion 菜单和自动隐藏的移动导航栏(最大宽度:949 像素)。而且进展顺利。我已将其设置为单击网站 Canvas 、“关闭按钮”或子菜单链接可关闭菜单。一切都很好。但是，如果我们单击指向页面上 anchor 的 anchor 链接(例如“政策”或“方向” anchor 等)，它会将 Canvas 向左推到几乎完全离开屏幕的位置。
起初我以为这是我的转换的一些供应商前缀问题，但只要不是由 anchor 触发，转换就完全没问题。

问题只有在

1. 在 Chrome 中(我测试过 Firefox 和 IE，它可能在其他 WebKit 浏览器中发生)
2. 当屏幕宽度小于 350px 左右时
3. 点击嵌入的 anchor 时。

http://codepen.io/StuffieStephie/pen/BNqJVX这是一支代码笔。我只是切换类以将所有内容推到 300px 以上

  $('#closeButton, #site-canvas, nav li li').click(function() {
  $('#drawer').removeClass('show-nav');
  $('#nav-icon').removeClass('open');
  $("nav li.gotsMenus").removeClass("showSub");  });

CSS

#drawer.show-nav, #drawer.show-nav ~ #site-canvas, #drawer.show-nav ~ #menuHeader {
  -webkit-transform: translateX(300px);
  transform: translateX(300px);
}

无论如何，您知道为什么会发生这种情况或如何解决它吗？我真的不认为我的代码或转换有问题，我认为这是 Chrome 中的一些错误...

Answer 1

如果我改变，问题就会消失

#site-canvas {
//other styles
position: relative;
}

到

#site-canvas {
//other styles
position: absolute;
top: 0;
left: 0;
}

我仍然很想知道为什么我有这种奇怪的行为，而且只在 Chrome 中:/