Fixed scrollbar on mobile when header is hidden on some browsers

squidfunk · Sep 19, 2021 · d678678 · d678678
1 parent 60a0078
commit d678678
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 25 deletions.
diff --git a/material/assets/stylesheets/main.3c7cdd75.min.css b/material/assets/stylesheets/main.3c7cdd75.min.css
diff --git a/material/assets/stylesheets/main.3c7cdd75.min.css.map b/material/assets/stylesheets/main.3c7cdd75.min.css.map
diff --git a/material/assets/stylesheets/main.665c42a3.min.css b/material/assets/stylesheets/main.665c42a3.min.css
diff --git a/material/assets/stylesheets/main.665c42a3.min.css.map b/material/assets/stylesheets/main.665c42a3.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -39,7 +39,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.665c42a3.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.3c7cdd75.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.3f5d1f46.min.css' | url }}">

diff --git a/src/assets/stylesheets/main/layout/_search.scss b/src/assets/stylesheets/main/layout/_search.scss
@@ -146,41 +146,36 @@
     @include break-to-device(tablet portrait) {
       position: fixed;
       top: 0;
-      left: 100%;
+      left: 0;
       z-index: 2;
-      width: 100%;
-      height: 100%;
+      width: 0;
+      height: 0;
       transform: translateX(5%);
       opacity: 0;
       transition:
-        right       0ms 300ms,
-        left        0ms 300ms,
+        width       0ms 300ms,
+        height      0ms 300ms,
         transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
         opacity   150ms 150ms;
 
+      // Adjust for right-to-left languages
+      [dir="rtl"] & {
+        right: 0;
+        left: initial;
+        transform: translateX(-5%);
+      }
+
       // Adjust appearance when search is active
       [data-md-toggle="search"]:checked ~ .md-header & {
-        left: 0;
+        width: 100%;
+        height: 100%;
         transform: translateX(0);
         opacity: 1;
         transition:
-          right       0ms   0ms,
-          left        0ms   0ms,
+          width       0ms   0ms,
+          height      0ms   0ms,
           transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
           opacity   150ms 150ms;
-
-        // Adjust for right-to-left languages
-        [dir="rtl"] & {
-          right: 0;
-          left: initial;
-        }
-      }
-
-      // Adjust for right-to-left languages
-      html [dir="rtl"] & {
-        right: 100%;
-        left: initial;
-        transform: translateX(-5%);
       }
     }