推进菜单中的大神秘边缘

Question

我已将“推入式菜单”移动菜单实施到一个非常基本的网站结构。 菜单基于http://callmenick.com/post/slide-and-push-menus-with-css3-transitions

由于某些奇怪的原因，当我点击“向右推”按钮时，菜单右边有一个很大的边距。我不确定为什么会发生这种情况或如何解决它。它在IE11中工作正常，但在Chrome v52中没有。

问题的一个例子可以在这里找到：http://seyoum.net/playground/1/

我曾尝试使用DevTools查明任何可能导致问题的CSS或标记而没有任何运气。

造成这种情况的原因是什么？如何解决？

它应该是什么样子以及它在IE 11中的样子：

这就是Chrome中的问题和样子：

Answer 1

您已将主包装设置为在CSS中移动-300px，但您只需要移动菜单。删除此...

.overlay-wrapper.has-push-right {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

@media all and (min-width:320px) {
  .overlay-wrapper.has-push-right {
      -webkit-transform: translateX(-300px);
      -ms-transform: translateX(-300px);
      transform: translateX(-300px);
  }
}

jsFiddle（免费工具）下次会很好，我使用你的链接to make one here。它确实使回答问题变得更加容易。点击该问题的人可以快速查看，解决和测试解决方案，以确保他们真正做出有效的更正。

Answer 2

事实证明，我忘记了#page的结束标记。我很尴尬。我下次会彻底检查我的标记。

Answer 3

空白的原因是您有以下CSS规则（为简洁起见，省略了前缀变体）：

.overlay-wrapper.has-push-right
{
    transform: translateX(-300px);
}

.push-menu--push-right.is-active
{
    transform: translateX(0);
}

.push-menu--push-right
{
    transform: translateX(300px);
    position: absolute;
    width: 300px;
    right: 0;
}

最后一组规则将菜单＆＃34;放在右边＆＃34;容器。第二个规则重置translate，并将其放回容器内。第一个将整个事物移到左边。

删除第二个，你应该全部设置。