I'm trying to get anchors to scroll to the right place in iPhone versions of Safari, Firefox, and Chrome (EDIT: all up to date with the latest version). Scroll-margin is working for this for firefox & chrome on my Linux desktop -- even in mobile developer mode. But when I'm on my iPhone in any of these browsers and I click on these links, the header covers up my anchor text, which it doesn't on desktop (is this working in Android? I wouldn't be stunned it if were). Is this a bug in scroll-margin? Check out this simple example.
function toTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}body,
html {
line-spacing: 2;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
.sticky {
position: sticky;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 25px;
background: yellow;
width: 100%;
top: 0;
}
.stuff {
padding: 15px;
}
#top,
.here {
padding: 30px 20px;
}
.here {
scroll-margin: 70px 0 0 0;
/* Just in case scroll-snap-margin is needed, see https://caniuse.com/#search=scroll-margin */
scroll-snap-margin: 70px 0 0 0;
}
#topbtn {
position: fixed;
bottom: 30px;
right: 30px;
background: red;
color: black;
}<div class=sticky>Sticky header</div>
<div id=top><a href="#here">Link to here</a> <a href="#there">Link to there</a>
</div>
<div class=stuff>a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of
text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of
text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br> a bunch of text<br>
</div>
<a class="here stuff" name=here>Here!</a>
<div class=stuff>a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more
text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br>
<a class=here name=there>There!</a><br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch
more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch
more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br> a bunch more text<br>
</div>
<button id=topbtn onclick=toTop()>Top</button>This code works on my desktop but the link scrolling isn't right on any iPhone mobile version of firefox or chrome or safari.
Why doesn't this work on mobile?
Edit: This snippet doesn't scroll right for me whether or not I comment out the line about scroll-snap-margin. See the note at canIuse canIuse
PPS Here's a codepen in case that makes testing easier, as at least on my phone, I don't see the code snippet on this page.