I’ve seen a few topics on issues with Safari, but I don’t know if they are exactly the same as my issue:
When I render my page (http://marks-fantabulous-project-8bb5d7.webflow.io/) in Chrome, it looks fine.
But when loaded on Safari, it renders all sorts of wonky. The hidden menu at the top shows slightly, the “Let’s talk button” is out of place. The chevron doesn’t show and you aren’t able to scroll past the hero.
Any ideas?
Thanks for posting about this. I took a look at your site and was able to resolve these issues.
Regarding the scroll issue— it looks like you currently have the Body set to overflow: hidden. This will prevent you from being able to scroll.
Regarding the hidden menu, I recommend adding an initial state of 0% opacity as well. Then set the scroll interaction to also include 100% opacity. This will ensure the secondary navbar is hidden completely when it loads.
The chevron can be moved back into view by either decreasing the top margin or the top position value:
For the “Let’s talk” Button, I was able to put this in its correct place by using flexbox on the nav menu (GIF on these steps).
This last issue is super weird—you shouldn’t have to use flexbox to ensure the button displays correctly in Safari.
I’ll investigate this last issue further and report back here when I have more information!
Hope this helps! 
Thanks for your quick reply! Looks good at the top, but now notice the sections below - the way they slide in and display is all funky. The “Let’s Talk” contact page as well.
Is this a flexbox thing as well?
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
