Content overlapping address bar after clicking links in Safari with the one-tab bar enabled

Title: Content Overlapping Address Bar After Clicking Links in Safari, tested on iPhone 11 (iOS 18.1.1)

Description:
When browsing in Safari on iPhone (iOS 18.1.1), the one-tab bar (address bar) collapses as expected when scrolling down a page. However, after clicking on a link and loading the next page, the content appears to overlap the collapsed address bar. This results in parts of the content being hidden or obscured by the address bar, which affects the user experience, especially on mobile devices with limited screen space. This issue is reproducible on Next.js applications and can be observed on websites such as rotterdam.nl and halderberge.nl.

Steps to Reproduce:

1. Enable the One-Tab Bar: Go to Settings > Safari and enable the one-tab bar feature.
2. Open the website rotterdam.nl or halderberge.nl in Safari on an iPhone 11 (iOS 18.1.1).
3. Scroll down the page so that the top address bar collapses.
4. Click on any link on the page to load a new one.
5. Once the new page loads, observe that the content appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.

Expected Result:
The content should not overlap or be hidden behind the collapsed address bar after the page reloads. The layout should adjust properly without interference from the address bar, providing a smooth user experience.

Actual Result:
When the new page loads, the content overlaps or appears on top of the collapsed address bar, causing parts of the content to be hidden or obscured.

Device(s) Affected:
iPhone 11 running iOS 18.1.1.

OS Version:
iOS 18.1.1

Technical Notes:
To address this issue, the following solutions have been attempted with no success:

1. Viewport Meta Tag:

   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   

   This was added to help ensure proper layout on mobile devices, but did not resolve the issue.

2. CSS Safe Area Insets:

   body {
     padding-top: env(safe-area-inset-top);
   }
   

   This CSS rule was applied to account for the safe area and prevent content from being hidden under the address bar, but it did not solve the overlapping issue.

3. Scroll Position Adjustment (for scroll-to-top button):
   Adjusting the scroll behavior by changing the scroll position to {top: 1} instead of {top: 0} was a successful workaround to keep the address bar collapsed when clicking the "scroll to top" button. However, this did not resolve the issue when navigating between pages or changing routes, where the content still overlaps the collapsed address bar.