CSS scroll-padding-top Not Working in Safari

Question

According to caniuse.com, the scroll-padding-top property is supported in the latest version of Safari, but it just is not working for me at all. I setup a reduced example Code Pen here to confirm it is not anything else messing with it, even with just CSS and HTML it does not seem to work. This is the CSS:

html {
      scroll-behavior: smooth;
      scroll-padding-top: 152px;
}

I can confirm my version of Safari is 13.0.1 and support for this property was implemented in 11.0 according to caniuse.com.

It works as expected in both Firefox and Chrome.

Is there anything I am missing that needs to be included so this works in Safari? I want to avoid using jquery and javascript if possible, but I am open to implementing a solution using them if that is the only way.

Answer 1

The scroll-padding property is part of the CSS Scroll Snap Module. The most recent update to the module states that scroll-padding should work with all scroll containers. However, the original specification for scroll-padding required that it be used only with scroll snap containers, which is what is currently implemented in Safari (hence, why caniuse lists it as supported). Development of the new spec has not yet started for Safari (see WebKit bug).

However, you don't actually need scroll-padding to achieve an "offset" when linking to elements on your page. Instead, you can just apply padding-top to the linked element and then a corresponding negative value for margin-top so there's no change to the layout.

html {
  scroll-behavior: smooth;
}

.glossary {
  margin-bottom: 100px;
}

.glossary__link {
  padding: 10px;
}

h3 {
  padding-top: 152px;
  margin-top: -152px;
}

<div class="glossary">
  <a href="#a" class="glossary__link">A</a>
  <a href="#b" class="glossary__link">B</a>
  <a href="#c" class="glossary__link">C</a>
  <a href="#d" class="glossary__link">D</a>
</div>

<hr>
<section>
  <h3 id="a">A</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="b">B</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="c">C</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>

<hr>
<section>
  <h3 id="d">D</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>