仅在chrome mobile上水平滚动BUG

Question

我正在开发一个网站并且在移动版本上（仅在 chrome 浏览器上 - firefox 工作正常）我有一个无法摆脱的水平滚动。这让我疯狂。我试过溢出-x：隐藏；在 html 和 body 标签上，它仍然不起作用。我运行了一个脚本来查找 DOM 上是否有任何元素超过了视口的宽度，但我什么也没找到。链接是orhideeaevents.ro。这是一张图片：

提前谢谢各位，如果我不清楚，请见谅。

Answer 1

我检查了您的页面，我认为问题出在您的徽标上。出于某种原因，它不想应用您在移动视图中为其设置的 60px 规则。您可以通过应用宽度来修复它：-webkit-fill-available;或宽度：适合内容；到 img 元素。它在 Chrome 浏览器的移动视图中对我有用，但我不确定这是否能 100% 解决您的问题。

Answer 2

试试这个CSS 代码，它可以解决问题：

html , body {
    width: 100% !important;
    overflow-x: hidden !important;
}

.custom-logo {
    width: unset;
    height: 100px !important;
}

#masthead {
    position: relative;
    width: 100%;
}