因此，我有一个网站，该网站的手机上有汉堡包菜单。
问题在于，每当页面加载到小型设备上时，汉堡菜单就位于右侧视口之外。这会导致侧面滚动问题和大量空白。
我最初以为我已经写了一些CSS来导致这种情况，但是经过试验，我意识到我根本不知道发生了什么。
我有这个问题的GIF。如果需要，我还将提供一个URL。
这是第一个gif
https://gfycat.com/GiftedPlaintiveEgret
所以这是怎么回事。我正在检查网页的DOM。如果您在页面上选择任何随机元素，然后编辑CSS属性，则菜单会自行修复。选择哪个元素或编辑哪个CSS属性都没有关系。进行调整时，问题已解决。
这是第二个gif
https://gfycat.com/EasyIllustriousBlackbear
在此gif文件中，仅通过激活一个名为杀虫剂的CSS插件就可以解决该问题。农药只是在文档中添加了另一个外部CSS表，以蓝色勾勒出所有内容。请注意，即使关闭pesiticde，我的问题也已修复。
最后是第三张gif
https://gfycat.com/ContentRepentantBeetle
这是最令人困惑的问题。它只需调整浏览器屏幕的大小即可修复汉堡包图标。显然，移动用户无法做到这一点。
我真的不明白这个问题。我尝试在nav元素上设置100％的宽度。我编写了一些JavaScript，当DOM准备就绪时，可以在页脚中将CSS属性添加到DIV中，然后在几秒钟后将其删除。这不能解决我的问题。如果需要，我会很乐意提供我编写的JavaScript。
有没有其他人遇到过这样的问题？
编辑
这是另一个例子。我使用浏览器Blisk在多个设备上测试我的网站。看这个
https://gfycat.com/BouncyFlakyGlobefish
第一次加载网站时，我遇到了汉堡菜单问题。当我告诉浏览器从其他设备查看该网站时（例如从iPhone 5切换到iPhone 6），它可以解决此问题。我对这个问题感到非常沮丧。
最佳答案
白色部分的动画正在增加页面的宽度（将固定在右侧的汉堡包推向视图之外），我不确定为什么动画完成后为什么它无法正确更新，但看起来需要重新进行页面重排后才能正常工作。
可能的CSS修复方法是添加.bodymargins{overflow:hidden}，尽管这可能会导致其他样式出现问题（未在您的网站上试用）
如果这不是一个选项，则可以在加载后不久立即手动触发页面重排（这是一个有点讨厌的选项，但是比被破坏要好）
Various re-flow options available here
关于javascript - 汉堡菜单在视口(viewport)外加载，随机重新出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37598044/