Menu icon Foundation
Sticky Topbar buggy in Safari

Hi,

I have found a problem with a sticky top bar when viewed in Safari on OSX 10.11.3 (not tested other OS's yet).

When I swipe down and bounce the page, the top bar drops down the page, leaving a margin above that displays the page as it scrolls behind the top bar. Firefox doesn't suffer because the page doesn't bounce (unless there's a setting that enables bounce), and have tested on Chrome and Opera, and they seem to be fine.

When the page has loaded, I set the top-margin of the top-bar to 0 with javascript, might this be the problem? Is there a better way to pin the top-bar to the top of the page?

I'm still getting my head around Foundation 6, never had a single problem with 5.

Any advice would be greatly appreciated, and I can provide any additional info as necessary.

Thanks

Paul

stickytop-barSafariOSX

Hi,

I have found a problem with a sticky top bar when viewed in Safari on OSX 10.11.3 (not tested other OS's yet).

When I swipe down and bounce the page, the top bar drops down the page, leaving a margin above that displays the page as it scrolls behind the top bar. Firefox doesn't suffer because the page doesn't bounce (unless there's a setting that enables bounce), and have tested on Chrome and Opera, and they seem to be fine.

When the page has loaded, I set the top-margin of the top-bar to 0 with javascript, might this be the problem? Is there a better way to pin the top-bar to the top of the page?

I'm still getting my head around Foundation 6, never had a single problem with 5.

Any advice would be greatly appreciated, and I can provide any additional info as necessary.

Thanks

Paul

Rafi Benkual over 3 years ago

Hemm, that's odd. So you pull the screen down, and the starting point of the sticky element changes? Do you have a link to a site we can text it on?

Have you tried using position fixed in CSS instead since the menu is at the top? Sticky plugin is only needed if it's not stuck to the top of the page.

Paul Hollyer over 3 years ago

Hi Rafi,

Thanks for the reply.

It only appears to be a problem in Safari when testing locally. I have now pushed it to my server, and this particular issue has gone away when accessing the pages remotely.

I've briefly tried position: fixed; but this throws up more problems with content scrolling over the top bar rather than behind. I'm no css guru, obviously. I'm mainly self taught (Ruby, RoR, NodeJS and friends etc), so any tips you can offer would be greatly appreciated. I started using Foundation 5 precisely because it gave me the tools without requiring much 'clever' CSS knowledge.

I've have just set up my server with Nginx and NodeJS for a bunch of new projects, so installed Foundation 6 in order to keep up to date. As I said before, I didn't have this problem with the topbar in Foundation 5.

There is one issue though. When I pull the page down in Safari, the unused space on the top bar between .top-bar-left and .top-bar-right disappears, displaying any scrolled content that is behind the topbar and between the edges of these two elements.

This is restricted to Safari, and only happens when I access the page over the internet, rather than locally (the original issue takes over when accessing the page locally in Safari).

Thanks

Paul