Website navigation bug on iPhone

[sykesfamily1]

Hello,
I think there may be a navigation issue when your website is viewed in the Safari browser on an iPhone.
I’m using iOS26 but I assume this problem will be the same on older iOS versions which show the Safari navigation bar at the bottom of the screen (it’s been like that for a few years now).
Basically, on iOS, the URL field and back/forward buttons are at the bottom of the Safari browser window. They enlarge as you scroll up and shrink as you scroll down. However, for some reason the URL field and navigation buttons are not visible/present on any trigpointinguk webpage (or the forum if accessed through the site) and hence it is impossible to navigate back to the page you had just been on.
I thought it was an iOS problem at first but having tried many other websites and it appears to only be an issue on your website.
I’ve attached images of what i should be seeing at the bottom of the Safari browser.
I hope that makes sense.
Cheers,
Garry

IMG_3778.jpeg (59.96 KiB) Viewed 1768 times

IMG_3779.jpeg (23.4 KiB) Viewed 1768 times

[sykesfamily1]

From ChatGPT

What’s Likely Causing It (Technical Explanation)

The issue occurs on all pages of TrigpointingUK but nowhere else, which strongly indicates a site-wide CSS / viewport configuration problem that conflicts with Safari in iOS 26.

Based on how Safari behaves when its toolbar disappears completely and never returns, the most likely causes are:

A. 100vh Being Used for Full-Screen Layout

If the site uses:

height: 100vh;

or:

min-height: 100vh;

Safari on newer iOS versions may miscalculate the viewport height because it treats the bottom toolbar as dynamic.

In iOS 26 especially, Safari:
• Calculates 100vh including the hidden toolbar height
• Then fails to re-render when the toolbar should appear
• Ends up treating the page like a standalone full-screen app

Modern best practice is:

height: 100dvh;

(dvh = dynamic viewport height)

If TrigpointingUK hasn’t updated to this, it can trigger exactly the behaviour you’re seeing.

⸻

B. overflow: hidden on <html> or <body>

If the global CSS includes:

html, body {
overflow: hidden;
}

Safari can:
• Prevent scroll-based UI restoration
• Suppress the toolbar permanently
• Lock the viewport

That would explain why scrolling does nothing.

⸻

C. Fixed / Sticky Full-Screen Wrappers

If the layout uses:

position: fixed;
top: 0;
bottom: 0;

or a wrapper that fills the entire viewport, Safari may render that layer over the browser UI region.

iOS 26 has known quirks around fixed elements at the bottom of the viewport.

⸻

D. Standalone Web-App Meta Tag

If the page contains:

<meta name="apple-mobile-web-app-capable" content="yes">

Safari may interpret the site as a standalone web app, which:
• Removes the browser chrome
• Hides navigation controls

If that tag is present unintentionally, it would explain everything.

⸻

[sykesfamily1]

Having explored this bug a bit more I think you can ignore it.
The reason:
iOS allows you to save a webpage to the homescreen for easy access. I have done this for TrigpointingUK because I regularly visit … however, in doing so I think iOS must wrap the webpage in code that makes it act like an app, which is why I am losing the URL bar and navigation buttons.
When I open Safari and type in your URL, the homepage appears with the URL bar and navigation buttons. Problem solved! Solution - don’t save favourite websites to the homescreen
Apologies if you have been traumatised by this thread
Cheers,
Garry

[Teasel]

I've made a change to the code which I'm told by AI should make the website a bit more Apple-friendly, but I have no way of testing it! Glad you got the issue solved, and pls let me know if my changes have actually broken it again!

[sykesfamily1]

Not broken, but the footer bar does take up quite a lot of screen real estate. Could that information be put in the menu perhaps? See screenshot