RESOLVED: IX2: Scrolling up triggers scroll down animations on Safari + iOS devices

Hi There

I’ve been working through the tutorial to make my nav bar disappear on down scroll and appear on up scroll. All working well on preview. All good on all sizes and mobiles once published, including HTC Mobile, however on my A1524 - iPhone 6 Plus, the Nav keep getting pushed up / Disappearing when I get to the very top of the page. On my iPhone only. Can you help? Thank you for your help in advance.

https://preview.webflow.com/preview/govey-associates?preview=8e9e22fc7d01ed5b664d28d7416d5682

I posted the same issue the other day, but unfortunately, I have yet to get a response or a solution. Hopefully, if more people post this issue, someone will post a solution.

I’m having the same issue in all versions of Safari. Desktop and mobile. I’m assuming this has something to do with the bounce Safari does when you scroll to the top/bottom of the screen.

1 Like

The demo page doesn’t behave properly either… http://show-hide-navbar-on-scroll.webflow.io

1 Like

Oh wow, very true, hopefully someone will come to our aid, I have a client waiting for me to upload the site over the coming week.

I am using the new hide/show menu on scroll trick using Interactions 2.0. So far it works fairly well, besides having to add a class on duplicate elements, I ran into a frustrating issue. On mobile, when scrolling back to the top of the page, once the hero section is visible the screen does a slight “bounce” and then the menu hides from view as if the page has started to scroll down again. Is there a fix for this?

https://preview.webflow.com/preview/project-billboard?preview=461b0271911f4e7667ee537542bc523c

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @kbowman

Thanks so much for posting about this!

I was able to reproduce this behavior on iPhones when using Safari. It looks like this is the only combination that produces this issue—were you able to see this issue on any other devices/browser?

It looks like it could be due to how Safari+iOS does a little bounce/reload when you scroll to the top of any page. I have reported this to the team and we are investigating this now.

I’ll post back here as soon as I have more information on the topic!

3 Likes

@Brando

Thanks so much for looking into this. I don’t have any way to really test other phones right now, but I am going to bet you are correct that this is a Safari issue. Unfortunately, since every iPhone defaults to Safari that could be a big deal. I really hate that Safari “bounce” to start with, now I hate it more! :slight_smile:

I hope there is a solution/workaround! Thanks again for looking into this issue.

Best,
K.

2 Likes

My pleasure to help! I’ll be sure to post updates as I hear back from the team :slight_smile:

3 Likes

Hi There

I submitted a design issue I had last week and turns out it looks like a bug, so resubmitting this a bug. Can someone from the team help please :slight_smile:

https://preview.webflow.com/preview/govey-associates?preview=8e9e22fc7d01ed5b664d28d7416d56823

Hi There

I’ve been working through the tutorial to make my nav bar disappear on down scroll and appear on up scroll. All working well on preview. All good on all sizes and mobiles once published, including HTC Mobile, however on my A1524 - iPhone 6 Plus, the Nav keep getting pushed up / Disappearing when I get to the very top of the page. On my iPhone only. Can you help? Thank you for your help in advance.

https://preview.webflow.com/preview/govey-associates?preview=8e9e22fc7d01ed5b664d28d7416d56823

Sorry, please see a working link to the project, Thank you

https://preview.webflow.com/preview/govey-associates?preview=8e9e22fc7d01ed5b664d28d7416d5682

I am using the new hide/show menu on scroll trick using Interactions 2.0. So far it works fairly well, besides having to add a class on duplicate elements, I ran into a frustrating issue. On mobile, when scrolling back to the top of the page, once the hero section is visible the screen does a slight “bounce” and then the menu hides from view as if the page has started to scroll down again. Is there a fix for this?

https://preview.webflow.com/preview/project-billboard?preview=461b0271911f4e7667ee537542bc523c

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Thanks for passing this on. I mentioned the same behavior here… Show / Hide Nav on Scroll Safari Bug

1 Like

Hey all, I’m having trouble with the show/hide nav based on the IX2 tutorial. Things work fine when previewing in the designer and in Chrome, but in Safari the nav slides away when you scroll to the top of the page.

Here’s the published page. To me, this feels like a problem with Safari’s scroll because it works when I click and drag the scroll bar. The bug shows up when I scroll the page with my mouse.

Here’s a video of it in action… safari nav bug - YouTube


Here is my public share link: LINK
(how to access public share link)

Bump. Anybody know what’s causing this?

Bump - having the same issue

Thanks for letting me know @md673 and @Rowananye! I merged that topic here as well so everyone will be notified when this is resolved! :slight_smile:

1 Like

@Brando- do you know if there has been any progress made on this?

Hi @kbowman

I don’t have anything to report at this time. I appreciate your patience while we investigate!

I was able to reproduce this behavior on iPhones when using Safari. It looks like this is the only combination that produces this issue—were you able to see this issue on any other devices/browser?

No, this is occurring on Safari desktop and iOS (both iPad and iPhone).