Google Chrome与Anchor Links的奇怪行为？

Question

好吧，我正在制作一个响应式网站，其中包括一个非画布手风琴菜单和一个用于移动设备的自动隐藏导航栏（最大宽度：949px）。而且它很顺利。我进行了设置，以便点击网站画布，“关闭按钮”或子菜单链接关闭菜单。一切都转好了。但是，如果我们点击指向页面上锚点的锚链接（例如“策略”或“方向”锚点等），它会将画布向左推到几乎完全不在屏幕的位置。
起初我认为这是我的转换的一些供应商前缀问题，但只要它不是由锚点触发，转换就完全没有了。

只有在

时才会出现此问题

1. 在Chrome中（我测试了Firefox和IE，它可能会在其他WebKit broswers中发生）
2. 当屏幕宽度小于350px
时
3. 点击嵌入式锚点时。

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中获得这种时髦的行为：/