Google Chrome中断菜单

Question

我们目前有一个下拉菜单在Chrome浏览器中被打破(和只有)在Chrome)。一周前它还在工作，现在发生了一些事情。

当您单击下拉菜单，然后单击下拉菜单中的弹出框时，弹出框的背景移动到屏幕左侧，弹出框的背景变得透明。

它可以在所有其他浏览器(包括基于Chromium的浏览器)中正常工作，但不能在Google Chrome中工作。

复制问题的步骤如下:

1. 进入https://solerastaging.wpengine.com.
2. 点击菜单上的解决方案按钮。
3. 点击"车队解决方案";

奇怪的是没有JavaScript错误，这使得故障排除非常困难。

我们想知道Chrome在过去几天是否有一些更新可能会导致这个问题，以及我们如何修复它。

Answer 1

我测试了这个规则，它在Mac上的Chrome上修复了这个问题。

ul.site-nav-multicolumn li {
position: relative;
}

背景有一个position: absolute，所以它将完全基于树的下一个前父元素来定位自己，这个父元素有一个固定的位置，最终以body/html标签结束。下一个有位置集的元素是header.site-nav也就是position: sticky。该元素的最左上角位于屏幕的左上方，这就是它被放置在顶部的原因。为什么它只适用于所有地方，但Chrome是另一个故事。跨浏览器测试本身就是一种乐趣。不管怎样，试试这个规则，让我知道你的进展如何。

Answer 2

我在这个bug报告中找到了一个解决方案，我认为这个问题与你看到的问题有关。将display: table添加到.site-nav__primary>.menu-item-has-children>ul>.menu-item-has-children ul::before，直到他们得到该bug排序。显然display: table将"触发引擎fallback"遗产。

.site-nav__primary > .menu-item-has-children > ul > .menu-item-has-children ul::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
min-height: 21.25rem;
border: 1px solid var(--color-jacarta-20);
background: var(--color-subtle);
display: table /* <-- what you need */
}

Answer 3

铬中似乎是一个错误。现在在所有基于chrome的浏览器中都发生了。

我们要重写菜单。