Foundation-sites: [Sticky] Mobile anchor bug

[RvWensen]

How to reproduce this bug:

1. Make a url with # and a name so http://www.test.com/test-page#location-on-page
2. Make anker on the page with <a name="location-on-page"></a>
3. Click on the url
4. Make your bowser small format
5. refresh you browser with a small format and the sticky box creates a bug

What should happen:

• Nothing special

What happened instead:

• The sticky box crashes

Browser(s) and Device(s) tested on:

• Desktop: Chorme and Safari
• Mobile: Chrome and Sarari

Foundation Version(s) you are using:

"foundation-sites": "~6.4.0"

Test case link:

https://www.creditcard.nl/aanvragen/mastercard-classic#beoordeel

[ncoden]

Hi @RvWensen.

• What do you mean by "Make your bowser small format".
• Could you provide a Gist with the crash logs ?

[ncoden]

Note: Foundation v6.4.1 is used on the given website.

[DanielRuf]

Do you mean the following?

[RvWensen]

@ncoden
I mean that i that you bowser should show the mobile 'small' version of the site.

i would love to give you 'Gist with the crash logs' but i dont know how to do that, could you please explain?

@DanielRuf
No i dont mean that the bug also happens on my other site without the that code on my page see https://www.uitvaartverzekering.nl/onderwerpen/euthanasieverklaring#wilsverklaring

[DanielRuf]

The sticky box crashes

Not sure what exactly you mean.

[RvWensen]

@DanielRuf
i will add printscreens.
Without error:
-> https://prnt.sc/iwxx5p
-> https://prnt.sc/iwxxfv

With error:
-> https://prnt.sc/iwxw0n
-> https://prnt.sc/iwxwdo

[ncoden]

Please do:

• Right click -> inspect element
• Go to the "Console" Tab
• If related to Foundation, give here its content in a Gist

[RvWensen]

@ncoden
I checked my console tab of Chrome but i can't find any thing usefull...

[ncoden]

I got it. When a page is loaded with both a Sticky element and an anchor, the sticky element is fixed at the bottom of the page and does not move. I am able to reproduce it with https://www.creditcard.nl/aanvragen/mastercard-classic#beoordeel (6.4.1) but not the Foundation documentation (6.4.3).

[DanielRuf]

Still reproducable in 6.4.4

https://codepen.io/DanielRuf/debug/oqpXJQ#beoordeel

[DanielRuf]

The cause is https://github.com/zurb/foundation-sites/blob/13d9ca20576dc614e5a4c686f153079bbed7c95a/js/foundation.sticky.js#L286

[krstatzar]

So haunted by this bug. Are there any workarounds?

[robabel]

+1

[ncoden]

This may be related to https://github.com/zurb/foundation-sites/issues/8980

[sharifzadesina]

Guys this breaks our applications, when we can have a fix?
Also a question, Which version doesn't have this issue? so we can downgrade to that until new version comes out.

[dauni]

Hm - i added a top: 0 !important
Certainly not the best solution but enough for me an my page at the moment:

[rdp]

@DanielRuf that codepen has expired...I assume this is the same bug that makes the sticky nav's appear in weird places or at the bottom (if in mobile browser and page is refreshed such that browser doesn't "start at the top")? https://stackoverflow.com/questions/45805735/foundation-6-mobile-search-bar-sticking-to-bottom-on-android/52799887#52799887 mentions data-sticky-on="small" as a workaround (if you don't mind losing screen real estate), but that didn't seem to work because the hamburger menu doesn't work "all the time" unless also accompanied by dauni's fix. dauni's worked for me

.is-at-bottom {
  top: 0 !important;
}

Also using these workarounds fixed another weird issue where the nav would position itself at the top of an embedded facebook page, if the facebook feed happened to be visible at start time. FWIW.

Another work around: remove sticky option if you don't need it: https://stackoverflow.com/a/18343699/32453

[sashabeep]

Issue still exists in Version 6.5.1.
On my small screen i don't use the sticky header, but it still attached.
Faced this isue when i started to scroll page which was not fully loaded. Sticky header bar repositioned at very bottom of the page with ridicilous amount of pixels in 'top' property. Also i don't understand why 'is-at-bottom' class is applied, i never wanted to stick header to the bottom.
Options like data-sticky-on="medium" and data-options="sticlkyOn:medium/large;" doesn't work in my case. I don't want to stick header anyway on small screen. Big white bar is place where header should be placed.

Trick with

.is-at-bottom {
  top: 0 !important;
}

works in my responsive rules for small screens.

[DanielRuf]

Issue still exists in Version 6.5.1.

Which is ok because there is no linked / mentioned PR which was maybe merged.

Can you provide a codepen so we can use that for creating a solution and a PR then?

[sashabeep]

@DanielRuf can you please provide basic template with all the set of plugins and css of current stable version on codepen? Tried to find it, but it was unsuccessful.

[DanielRuf]

@sashabeep see https://codepen.io/DanielRuf/pen/oNvpbBG

[andycochran]

Seems this bug doesn't even require an anchor. Simply scrolling down and refreshing reproduces the bug. The browser back button bringing you to a previously-scrolled page does the same.

[joeworkman]

This issue has been mentioned on Foundation Open Source Community. There might be relevant details there:

https://foundation.discourse.group/t/sticky-mobile-anchor-bug/3685/1