From 731d03183d1c65636cc98dc8be15768fe4725969 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