fix header visibility on safari (#3901)

Author: chenxsan

src/components/Markdown/Markdown.scss

@@ -10,6 +10,9 @@ $someExtraHeight: 10px;
 $topHeightDesktop: $navigationHeight + $navigationSubHeight + $someExtraHeight;
 $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
 
+$topHeightMobile: $navigationHeight;
+$topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
+
 .markdown {
   line-height: 1.5em;
 
@@ -32,22 +35,38 @@ $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
     font-size: getFontSize(-1);
   }
 
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:before {
+      content: '';
+      display: block;
+      visibility: hidden;
+      pointer-events: none;
+      height: $topHeightMobile;
+      margin-top: -#{$topHeightMobile};
+      @include break {
+        height: $topHeightDesktop;
+        margin-top: -#{$topHeightDesktop};
+      }
+    }
+  }
+
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
+    display: block;
     font-family: $font-stack-heading;
     font-weight: 600;
     line-height: 1.4;
-    margin: 1.5em 0 0.25em;
+    margin: 0 0 0.25em;
     color: getColor(fiord);
     word-break: break-word;
-    scroll-margin-top: $topHeightDesktop;
 
     tt,
     code {
@@ -214,7 +233,7 @@ $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
     border-right: 1px solid #cccccc;
 
     &:last-child {
-      border-right:none;
+      border-right: none;
     }
   }
 
@@ -246,7 +265,7 @@ $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
     border-right: 1px solid #cccccc;
 
     &:last-child {
-      border-right:none;
+      border-right: none;
     }
 
     @include break {
@@ -272,7 +291,7 @@ $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
     flex-direction: column;
     justify-content: baseline;
     margin: 10px 0;
-    padding: 0 10px
+    padding: 0 10px;
   }
 
   .description.desktop {
@@ -393,7 +412,23 @@ $topHeightDesktopWithBanner: $bannerHeight + $topHeightDesktop;
 }
 
 .notification-bar-visible .markdown {
-  h1,h2,h3,h4,h5,h6{
-    scroll-margin-top: $topHeightDesktopWithBanner;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:before {
+      content: '';
+      display: block;
+      visibility: hidden;
+      pointer-events: none;
+      height: $topHeightMobileWithBanner;
+      margin-top: -#{$topHeightMobileWithBanner};
+      @include break {
+        height: $topHeightDesktopWithBanner;
+        margin-top: -#{$topHeightDesktopWithBanner};
+      }
+    }
   }
 }