Safari Mobile Menu Overlapping Page Content - Any Solutions?

Design help General
1

Hello everyone,

I’ve been struggling with an issue on my website when viewed on Safari mobile, and I’m hoping someone here might have encountered the same problem or has a solution.

The problem occurs when users navigate between pages, especially when the page loads quickly. The Safari mobile menu (the top address bar) sometimes overlaps the content, making it look like the content has been scrolled up slightly. This results in some elements near the top of the page being hidden underneath the menu bar. The issue is inconsistent, which makes it even more frustrating to debug.

What I’ve Tried So Far:

  1. Viewport Recalculation: I believe this issue is related to how Safari handles viewport changes when transitioning between pages. To address this, I’ve tried forcing a slight scroll adjustment when the page loads (scrolling down by 1 pixel), which sometimes helps but isn’t foolproof.

  2. Delayed Navigation: I added a small delay before loading a new page to give Safari time to recalculate the viewport. However, this doesn’t always work, especially if the delay is too short or too long.

  3. Pixel vs. Viewport Units: Initially, I thought the issue might be related to using vw and vh units in my CSS. I tried switching everything to pixel values to eliminate any inconsistencies with viewport units, but the problem persists, suggesting that the issue is more related to how Safari handles viewport resizing or recalculating on mobile.

  4. Default Webflow Components: I tried using the default Webflow layout elements (e.g. its pre-design navigation bar and such) to make sure, once again, it has nothing to with my own layout.

What I Need:

Has anyone else run into this issue with Safari mobile? If so, what approaches have you found effective in ensuring that the content isn’t overlapped by the menu bar on new page loads? I’m open to tweaking the design, JavaScript, or anything else that might help fix this.

Thanks in advance for any advice or insights!

2

hi@ and welcome, the best way to get help is to follow the forum post guide.

When posting please:

  • Required: Share your project’s Read-Only link and live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code (eg. javaScript) does not run in the Designer.
  • Describe issue in detail including what page, section and/or element is localized
  • Upload as many screenshots as possible or provide screencast videos to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @forumMemberName

While your issue is not related to WF but to browsers compatibility you should search internet where these issues are well described with solutions.

Also this forum has many solutions that where answered over many years this forum exists. for example the recent response with link to documentation is here:

but feel free to find other articles or videos to get familiar why this may happen and how it can be solved. :vulcan_salute:

3

Your answer, while appreciate it very much, doesn’t fit my description. I did search the internet and I searched on Webflow. One person had a similar issue (No answer)