带有锚链接的谷歌浏览器的奇怪行为？答案

【问题标题】：Bizarre behavior from Google Chrome with Anchor Links?带有锚链接的谷歌浏览器的奇怪行为？
【发布时间】：2015-07-26 07:22:49
【问题描述】：

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

只有在

在 Chrome 中（我已经测试过 Firefox 和 IE，它可能会在其他 WebKit 浏览器中发生）
当屏幕宽度小于350px左右时
点击嵌入的锚点时。

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

  $('#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 中的一些错误......

【问题讨论】：

标签： jquery css google-chrome responsive-design

【解决方案1】：

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

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

到

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

我仍然很想知道为什么我会出现这种奇怪的行为，而且只是在 Chrome 中：/

【讨论】：