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:
- Go to https://solerastaging.wpengine.com.
- Click the Solutions button on the menu.
- Click the "Fleet Solutions" button on the dropdown.
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.
CodePudding user response：
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.
CodePudding user response：
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".