Hey guys, I recently just launched this website without issues. But starting today, without any changes made, the native Dropdown menu no longer visible. The menu is only visible when in mobile. This issue only affects Safari. See example below:
How it renders correctly on Chrome and others, see below.
How it renders in Safari, it’s invisible. The weird thing is, it’s actually on foreground. If you click on it, it will trigger one of the links. But it’s invisible. See the screenshot below when in Inspect mode.
Webflow’s dropdown component is designed to work across all major browsers, including Safari. If you’re experiencing visibility issues, here are some common solutions:
The dropdown’s z-index and positioning settings are crucial for proper display. Ensure the dropdown has a higher z-index than surrounding elements and check that its position is set to ‘Relative’ or ‘Fixed’ depending on your needs. Also verify that the dropdown trigger and list are properly connected in the Navigator panel.
For testing cross-browser compatibility, you can use Webflow’s preview mode or publish to a staging domain to check the behavior across different browsers and devices.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Sorry Mr Bot, this solution is obvious and has been done. It has nothing to do with it and it’s potentially a bug on Safari that may need a workaround from Webflow team.
