Blank space after page content on Safari

[mckaynilson]

Hello,

When testing my site in Safari (both desktop and mobile) I’ve found that most of my project pages scroll far past where they should end. There should only be a small amount of white space after the last element on each project page. Everything works properly in the designer and in Chrome though.

I should mention that sometimes after the page scrolls farther than it should, the page randomly jumps to where it should have ended and works properly until refreshed or I go to a new page. It looks like some sort of glitch and really disrupts the flow of the site.

Here’s a live example for testing in Safari:
www.mckaynilson.design/jul

Any help or ideas for resolving this are much appreciated!

Best
McKay

Here is my site Read-Only link:
https://preview.webflow.com/preview/mckays-first-project-b819f2?utm_source=mckays-first-project-b819f2&preview=7f963f993af6b842cc793759c7f043b3

[Brando (Brandon Roche)]

Hi @mckaynilson

Thanks for posting and good question.

It looks like this is caused by the page load interaction that moves these sections 100vh down, then back up. Definitely odd that Safari leaves the 200vh gap at the bottom.

I was able to resolve this with two steps:

1. Change the targets of the page load to be the sections within your main wrapper:
   

   

2. Set the project-page-content-wrapper to overflow: hidden
   

   

Can you take these steps and let me know if this helps?

​Thanks in advance!

[mckaynilson]

As far as I can tell, that worked perfectly. Thanks for your help and the quick reply!