From 2d8b61e58963a8729d2a1093d62166f0fc24cf0d Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 19 Jul 2019 20:08:33 -0700
Subject: [PATCH] fix: only apply custom scrollbars to root scroller (#1346)

---
 src/scss/custom-scrollbars.scss | 34 +++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/scss/custom-scrollbars.scss b/src/scss/custom-scrollbars.scss
index c323dd362..898a3a767 100644
--- a/src/scss/custom-scrollbars.scss
+++ b/src/scss/custom-scrollbars.scss
@@ -1,3 +1,14 @@
+// By design, scrollbar styles are only applied to the top level scroller.
+// Note that the nonstandard -webkit-* version cannot be "unset,"
+// which is inconvenient. But it also doesn't cascade, so we can
+// use that to our advantage.
+//
+// See: https://superuser.com/a/417750
+
+//
+// Firefox
+//
+
 html {
   // Firefox with scrollbar config changes as of 2018-11
   scrollbar-face-color: var(--scrollbar-face-color);
@@ -7,28 +18,39 @@ html {
   scrollbar-color: var(--scrollbar-face-color) var(--scrollbar-track-color);
 }
 
-::-webkit-scrollbar {
+body {
+  // reset firefox styles so they don't cascade past HTML
+  scrollbar-face-color: initial;
+  scrollbar-track-color: initial;
+  scrollbar-color: initial;
+}
+
+//
+// Chrome/Safari
+//
+
+body::-webkit-scrollbar {
   width: var(--scrollbar-width);
   height: var(--scrollbar-height);
 }
 
-::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb {
   background: var(--scrollbar-face-color);
   border-radius: var(--scrollbar-border-radius);
 }
 
-::-webkit-scrollbar-thumb:hover {
+body::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-face-color-hover);
 }
 
-::-webkit-scrollbar-thumb:active {
+body::-webkit-scrollbar-thumb:active {
   background: var(--scrollbar-face-color-active);
 }
 
-::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
+body::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active {
   background: var(--scrollbar-track-color);
 }
 
-::-webkit-scrollbar-corner {
+body::-webkit-scrollbar-corner {
   background: var(--scrollbar-background-color);
 }