Safari doesn't scroll to empty span (fixes #24)

adobe · Sep 25, 2020 · be19d1c · be19d1c
1 parent 3c897d8
commit be19d1c
Showing 1 changed file with 13 additions and 12 deletions.
diff --git a/packages/gatsby-theme-parliament/src/components/Heading/index.js b/packages/gatsby-theme-parliament/src/components/Heading/index.js
@@ -21,7 +21,7 @@ const headingSizes = ['XL', 'L', 'M', 'S', 'XS', 'XXS'];
 
 // Use the Anchor to allow scrolling to heading position minus GlobalNav height
 const Anchor = ({ id }) => (
-  <span
+  <div
     aria-hidden="true"
     id={id}
     css={css`
@@ -51,17 +51,18 @@ const createHeading = (level, { id, children, className, css: styles, ...props }
         css={css`
           ${isHeading1
             ? `& + p {
-          margin-top: var(--spectrum-global-dimension-size-300) !important;
-          font-size: var(--spectrum-global-dimension-size-225);
-        }`
-            : `& span a {
-          opacity: 0;
-          transition: opacity var(--spectrum-global-animation-duration-100) ease-in-out;
-        }
-
-        &:hover span a {
-          opacity: 1;
-        }`}
+              margin-top: var(--spectrum-global-dimension-size-300) !important;
+              font-size: var(--spectrum-global-dimension-size-225);
+            }`
+            : `
+            & span a {
+              opacity: 0;
+              transition: opacity var(--spectrum-global-animation-duration-100) ease-in-out;
+            }
+    
+            &:hover span a {
+              opacity: 1;
+            }`}
 
           ${styles}
         `}>