Created by: ffoodd
Our current trick works great for headings or landmarks :targeted by links activation, however it still allows focus to be hidden under the sticky header.
- Go to any docs page,
- use a TOC link to scroll down the page,
- then
Shift+Tabto navigate backward using keyboard.
You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.
Applying scroll-padding-top to the :root solves this without any side-effect—but it requires to drop scroll-margin-top for anchors to prevent doubling the offset.
FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.
Friendly ping @mdo @patrickhlauke if you have any concerns or insights on this.