-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Sticky] Mobile anchor bug #11098
Comments
Hi @RvWensen.
|
Note: Foundation |
@ncoden i would love to give you 'Gist with the crash logs' but i dont know how to do that, could you please explain? @DanielRuf |
Not sure what exactly you mean. |
@DanielRuf With error: |
Please do:
|
@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). |
Still reproducable in 6.4.4 |
So haunted by this bug. Are there any workarounds? |
+1 |
This may be related to #8980 |
Guys this breaks our applications, when we can have a fix? |
@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
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 |
Issue still exists in Version 6.5.1. Trick with .is-at-bottom {
top: 0 !important;
} works in my responsive rules for small screens. |
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? |
@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. |
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. |
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 |
How to reproduce this bug:
<a name="location-on-page"></a>
What should happen:
What happened instead:
Browser(s) and Device(s) tested on:
Foundation Version(s) you are using:
"foundation-sites": "~6.4.0"
Test case link:
https://www.creditcard.nl/aanvragen/mastercard-classic#beoordeel
The text was updated successfully, but these errors were encountered: