foundation-sites: [Sticky] Mobile anchor bug
How to reproduce this bug:
- Make a url with # and a name so http://www.test.com/test-page#location-on-page
- Make anker on the page with
<a name="location-on-page"></a> - Click on the url
- Make your bowser small format
- 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
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 23 (16 by maintainers)
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.
Hm - i added a
top: 0 !importantCertainly not the best solution but enough for me an my page at the moment: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
works in my responsive rules for small screens.
Still reproducable in 6.4.4
https://codepen.io/DanielRuf/debug/oqpXJQ#beoordeel
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).