From d2080e8d8db54b6b4a0a3bc90d44294e1b1d3e43 Mon Sep 17 00:00:00 2001 From: Andreas Fuchs Date: Wed, 1 Jul 2020 16:55:57 -0400 Subject: [PATCH] Use scroll-padding-top to position anchors correctly in the viewport This (fairly new) CSS attribute gets browsers that support it perfectly set up to skip the top nav bar. Unfortunately, Safari (both macOS and iOS) don't support it for this purpose yet, so we work around them in JS. --- templates/rustdoc/page.html | 38 +++++++++++++++++++++++++------------ templates/style.scss | 12 ++++++++++++ 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/templates/rustdoc/page.html b/templates/rustdoc/page.html index 1720a9806..a0e52177b 100644 --- a/templates/rustdoc/page.html +++ b/templates/rustdoc/page.html @@ -31,20 +31,34 @@ diff --git a/templates/style.scss b/templates/style.scss index c8a1b4606..dc08524f0 100644 --- a/templates/style.scss +++ b/templates/style.scss @@ -92,6 +92,18 @@ body { margin: 0; // Since top navbar is fixed, we need to add padding to the body content. padding-top: $top-navbar-height; + // The scroll padding on the is necessary for Chrome + // browsers for now (see + // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/ + // for an explanation) + scroll-padding-top: $top-navbar-height; +} + +html { + // Offset anchor jump targets down by this much, so they don't + // overlap the top navigation bar (not supported on Desktop/Mobile + // Safari yet): + scroll-padding-top: $top-navbar-height; } // this is a super nasty override for help dialog in rustdocs