From: Patrick H. Lauke <redux@splintered.co.uk>
Date: Sun, 18 May 2025 10:14:51 +0000 (+0100)
Subject: Tweak `.visually-hidden` to use `display:inline-block` instead of absolute positioning
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=40b3f46227f095f1324c1e4ba2de8df314dfb7dd;p=thirdparty%2Fbootstrap.git

Tweak `.visually-hidden` to use `display:inline-block` instead of absolute positioning
---

diff --git a/scss/mixins/_visually-hidden.scss b/scss/mixins/_visually-hidden.scss
index 9dd0ad33bf..c203cee204 100644
--- a/scss/mixins/_visually-hidden.scss
+++ b/scss/mixins/_visually-hidden.scss
@@ -6,6 +6,7 @@
 // See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
+  display: inline-block !important; // using this rather than position:absolute to allow for width/height/clip to work without causing undue spacing (e.g. in responsive tables)
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
@@ -15,11 +16,6 @@
   white-space: nowrap !important;
   border: 0 !important;
 
-  // Fix for positioned table caption that could become anonymous cells
-  &:not(caption) {
-    position: absolute !important;
-  }
-
   // Fix to prevent overflowing children to become focusable
   * {
     overflow: hidden !important;