diff --git a/.changeset/shy-pumpkins-walk.md b/.changeset/shy-pumpkins-walk.md
new file mode 100644
index 0000000000..5bc4baa042
--- /dev/null
+++ b/.changeset/shy-pumpkins-walk.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Prevent `.show-on-focus` to change width/height
diff --git a/docs/src/stories/utilities/Layout.stories.jsx b/docs/src/stories/utilities/Layout.stories.jsx
index bb3c3c26b2..c32cad6201 100644
--- a/docs/src/stories/utilities/Layout.stories.jsx
+++ b/docs/src/stories/utilities/Layout.stories.jsx
@@ -285,6 +285,13 @@ export const ScreenReaderOnly = ({}) => (
   </div>
 )
 
+export const ShowOnFocus = ({}) => (
+  <div>
+    <div class="mb-2">Click here and press tab to make the ".show-on-focus" element appear</div>
+    <button type="button" class="btn show-on-focus">.show-on-focus</button>
+  </div>
+)
+
 export const MediaObject = ({}) => (
   <div class="clearfix p-3 border">
     <div class="float-left p-3 mr-3 color-bg-subtle">
diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
index bdb504c86b..b925331103 100644
--- a/src/utilities/visibility-display.scss
+++ b/src/utilities/visibility-display.scss
@@ -107,17 +107,18 @@
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+
+  &:not(:focus) {
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
 
   &:focus {
     z-index: 999;
-    width: auto;
-    height: auto;
-    clip: auto;
   }
 }