fix: fix visually-hidden style to prevent a strange bug in Chrome

Fixes #1200
CleverCloud · Nov 15, 2024 · e05e85c · e05e85c
1 parent 327b180
commit e05e85c
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/src/styles/accessibility.js b/src/styles/accessibility.js
@@ -3,12 +3,13 @@ import { css } from 'lit';
 // language=CSS
 export const accessibilityStyles = css`
   .visually-hidden {
-    position: absolute;
-    overflow: hidden;
-    width: 1px;
-    height: 1px;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    top: 0; /* this fixes a bug in Chrome when this style is used into a grid element (and has overflow) */
     white-space: nowrap;
+    width: 1px;
   }
 `;