谷歌Chrome响应式调试工具下网站显示异常问题求助

大家好，我正在开发一个响应式网站，用了一份基础的reset.css做样式重置。最近碰到个特别闹心的问题：当我用Chrome的开发者工具切换到响应式移动视图时（大概在600px左右的断点位置），导航栏甚至整个网站都会出现诡异的异常——背景色和页面元素直接消失了。但如果我手动缩小浏览器窗口，完全不会出现这种空白问题，这真的快把我搞疯了！

我整理了相关的代码片段，导航栏的HTML结构如下：

<nav class="main-class">
    <div class="nav-elements" id="logo">...</div>
    <!-- 导航栏其他相关元素 -->
</nav>

同时我也截取了控制台信息和代码的相关截图，能看到异常出现时的状态。有没有大佬遇到过类似的情况？麻烦帮我分析下可能的原因，或者给点排查的方向，万分感谢！

备注：内容来源于stack exchange，提问作者Shravan Rajput