I have a Nextjs web app featuring a navbar with a hamburger menu, logo and an avatar. In desktop (chrome, mozilla, brave - developer tools mobile mode) the navbar works perfectly fine. In chrome on an android phone the navbar works perfectly fine.
In any browser on iPhone X, 11 & 12, the navbar is completely unresponsive, unclickable on pages that are scrollable.
On these pages I have the navbar rendered and then a container with this pages contents. This container has the following css:
// style={{ overflow: "hidden", overflowY: "scroll", height: "100%" }}
If I remove this piece of css, the navbar is working again but obviously the component is unscrollable, another undesirable result.
I have tried this both inline and in css modules with the same result. This is very annoying since it works perfectly on desktop & android. What could be the issue?