My one-page site is broken into different sections. On my iPad running updated Safari, the page sections are positioning over themselves. Tried a few different ideas to fix this, but no luck so far.
Your top section is set to 100vh. Which means it will always be the height of whatever browser window opens the site. I suggest changing it to auto which will size it to the content.
I do have the navy “landing container” set to 100vh. I want the entire screen view to be navy when you arrive on the page.
Then I have a content container for the landing container. All of my content (the header, text, and animation) go within the landing container. The content container is set to 100%. Therefore, none of the content should go outside 100vh, the viewport height of the screen.
That doesn’t really make sense. I am not sure what you are trying to achieve. Are you trying to get the blue background to stay put while the text scrolls over it?