Fixed navigation spacing in Safari 18.3 (#7979)

squidfunk · Feb 12, 2025 · a9bae7f · a9bae7f
1 parent 9be17e7
commit a9bae7f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/material/templates/assets/stylesheets/main.6fdb9009.min.css b/material/templates/assets/stylesheets/main.6fdb9009.min.css
diff --git a/material/templates/assets/stylesheets/main.8608ea7d.min.css b/material/templates/assets/stylesheets/main.8608ea7d.min.css
diff --git a/...ets/stylesheets/main.6fdb9009.min.css.map → ...ets/stylesheets/main.8608ea7d.min.css.map b/...ets/stylesheets/main.6fdb9009.min.css.map → ...ets/stylesheets/main.8608ea7d.min.css.map
diff --git a/material/templates/base.html b/material/templates/base.html
@@ -44,7 +44,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.6fdb9009.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.8608ea7d.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.06af60db.min.css' | url }}">

diff --git a/src/templates/assets/stylesheets/main/components/_nav.scss b/src/templates/assets/stylesheets/main/components/_nav.scss
@@ -555,7 +555,9 @@
     // Hide nested navigation
     &__toggle ~ & {
       display: grid;
-      grid-template-rows: 0fr;
+      // Hack: we must set a minimum of 8px to work around a bug introduced in
+      // Safari 18.3, collapsing to a height of 0 – see https://t.ly/ViA3N
+      grid-template-rows: minmax(#{px2rem(8px)}, 0fr);
       visibility: collapse;
       opacity: 0;
       transition:
@@ -571,7 +573,7 @@
 
     // Show nested navigation when toggle is active or indeterminate
     &__toggle:is(:checked, .md-toggle--indeterminate) ~ & {
-      grid-template-rows: 1fr;
+      grid-template-rows: minmax(#{px2rem(8px)}, 1fr);
       visibility: visible;
       opacity: 1;
       transition:
@@ -726,7 +728,7 @@
       // Hack: Always show active navigation tab on breakpoint screen, despite
       // of checkbox being checked or not - see https://t.ly/Qc311
       .md-nav[data-md-level="1"] {
-        grid-template-rows: 1fr;
+        grid-template-rows: minmax(#{px2rem(8px)}, 1fr);
         visibility: visible;
         opacity: 1;
       }