So I am getting this strange horizontal line on top of my page on iOS Safari, and the strangest thing is that it appears only sometimes. If I scroll down the page it can disappear, and then reappear at random times. The changes only take place during scroll. I've tried a number of things to fix, but nothing seems to work. (position changes, border changes, body changes, etc.) The one thing that worked is making the menu sticky (and not fixed as it currently is) and then top: -1px, but that is not the functionality that I want for it. There are other hacky ways of doing it, like placing a 1px sticky hr on top of it, but I imagine there is something more elegant that can be done.
The issue does not appear on any other browser that I've tested.
Does anyone have any ideas? You can also check the website on huk-withbuilderio-git-topbarissue-hearology.vercel.app
The menu is built with react-boostrap.
Thank you.