We currently have a dropdown menu that is broken in Chrome (and ONLY in Chrome). It was working a week ago, and something has happened.
What happens is that when you click the dropdown menu and then click a flyout from the dropdown, the background of the flyout moves to the left side of the screen, and the background for the flyout becomes transparent.
It works correctly in every other browser (including ones based on Chromium) but not in Google Chrome.
The steps to replicate the issue are:
The weird thing is that there are no JavaScript errors so that makes troubleshooting very hard.
We're wondering if Chrome had some update in the past few days that might have caused this and how we can fix it.
I tested this rule and it fixed the issue on your site in Chrome on a Mac.
ul.site-nav-multicolumn li {
position: relative;
}
The background has a position: absolute so it will position itself absolutely based on the next previous parent up the tree that has a set position, ultimately ending at the body/html tag. The next element that had a position set was header.site-nav which was position: sticky. The left top most part of that element is top left of the screen, so that's why it was positioned at the top. Why it only worked everywhere but Chrome is another story. Cross-browser testing is it's own fun. Anyway, try that rule and let me know how you get on.
I found a solution within this bug report, I think that issue is related to the issue you're seeing. Add display: table to .site-nav__primary>.menu-item-has-children>ul>.menu-item-has-children ul::before until they get that bug sorted. Apparently display: table will "trigger legacy engine 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 */
}
It does appear to be a bug in Chromium. Now it's happening in all Chromium-based browsers.
We're going to rewrite the menu.