Fixed details layout in Safari

src/assets/stylesheets/base/_typeset.scss

@@ -214,7 +214,6 @@ kbd {
     position: relative;
     margin: 1em 0;
     line-height: 1.4;
-    -webkit-overflow-scrolling: touch;
 
     // Actual container with code, overflowing
     > code {
@@ -225,6 +224,7 @@ kbd {
       word-break: normal;
       box-shadow: none;
       box-decoration-break: slice;
+      -webkit-overflow-scrolling: touch;
 
       // Override native scrollbar styles
       &::-webkit-scrollbar {

src/assets/stylesheets/extensions/_permalinks.scss

@@ -31,7 +31,7 @@
   .headerlink {
     display: inline-block;
     margin-left: px2rem(10px);
-    // Hack: If we don't set visibility hidden, the text content of the node
+    // Hack: if we don't set visibility hidden, the text content of the node
     // will include the headerlink character, which is why Google indexes them.
     visibility: hidden;
     opacity: 0;

src/assets/stylesheets/extensions/pymdown/_details.scss

@@ -26,7 +26,7 @@
 
 // Icon definitions
 :root {
-  --md-details-icon: url("{{ chevron-down }}");
+  --md-details-icon: url("{{ chevron-right }}");
 }
 
 // ----------------------------------------------------------------------------
@@ -43,24 +43,21 @@
 
     // Rotate title icon
     &[open] > summary::after {
-      transform: rotateZ(0deg);
+      transform: rotate(90deg);
     }
 
     // Remove bottom spacing
     &:not([open]) {
       padding-bottom: 0;
     }
-
-    // Ensure clickable area, even if no title is set
-    summary {
-      min-height: px2rem(20px);
-    }
   }
 
   // Title
   summary {
     @extend .admonition-title;
 
+    box-sizing: border-box;
+    min-height: px2rem(20px);
     outline: none;
     cursor: pointer;
 
@@ -69,14 +66,14 @@
       display: none;
     }
 
-    // Icon
+    // Details marker
     &::after {
       flex-shrink: 0;
       width: px2rem(20px);
       height: px2rem(20px);
       margin-left: auto;
       background-image: var(--md-details-icon);
-      transform: rotateZ(-90deg);
+      transform: rotate(0deg);
       transition: transform 250ms;
       content: "";
 
@@ -84,7 +81,45 @@
       [dir="rtl"] & {
         margin-right: auto;
         margin-left: initial;
-        transform: rotateZ(90deg);
+        transform: rotate(180deg);
+      }
+    }
+
+    // Hack: absolute positioning for summary elements in Safari 9+ because,
+    // of course, they cannot be flex containers: https://bit.ly/2IW5g4O
+    _:default:not(:root:root), & { // stylelint-disable-line
+      position: relative;
+      padding: px2rem(8px) px2rem(40px);
+
+      // Icon and details marker
+      &::before,
+      &::after {
+        position: absolute;
+        flex-shrink: initial;
+        margin: initial;
+      }
+
+      // Icon
+      &::before {
+        margin-left: px2rem(-28px);
+
+        // Adjust for right-to-left languages
+        [dir="rtl"] & {
+          margin-right: px2rem(-28px);
+          margin-left: initial;
+        }
+      }
+
+      // Details marker
+      &::after {
+        top: px2rem(8px);
+        right: px2rem(12px);
+
+        // Adjust for right-to-left languages
+        [dir="rtl"] & {
+          right: initial;
+          left: px2rem(12px);
+        }
       }
     }
   }

src/assets/stylesheets/layout/_base.scss

@@ -169,7 +169,7 @@ hr {
 // Skip link
 .md-skip {
   position: fixed;
-  // Hack: If we don't set the negative z-index, the skip link will induce the
+  // Hack: if we don't set the negative z-index, the skip link will induce the
   // creation of new layers when code blocks are near the header on scrolling
   z-index: -1;
   margin: px2rem(10px);

src/assets/stylesheets/layout/_nav.scss

@@ -518,7 +518,7 @@
 
       // Rotate icon for expanded lists
       .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link & {
-        transform: rotateZ(90deg);
+        transform: rotate(90deg);
       }
     }
   }