fix: workaround LiveRegion layout issues (#1534)

* fix weird scrollHeight behavior See https://static.duvallj.pw/2024-11-19/scrollHeightBug/index.html for a reproduction, and https://blog.duvallj.pw/posts/2024-11-19-chrome-heisenbug-uncovered.html for an explanation
clauderic · Nov 23, 2024 · 93602df · 93602df
1 parent e2a1776
commit 93602df
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/.changeset/tidy-cobras-hang.md b/.changeset/tidy-cobras-hang.md
@@ -0,0 +1,9 @@
+---
+'@dnd-kit/accessibility': patch
+---
+
+Workaround `<LiveRegion>` layout bug by adding explicit `top` and `left`
+attributes. Under sufficiently complex CSS conditions, the element would
+overflow containers that it's not supposed to. See [this
+post](https://blog.duvallj.pw/posts/2024-11-19-chrome-heisenbug-uncovered.html)
+for a complete explanation.
diff --git a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx
@@ -10,6 +10,8 @@ export function LiveRegion({id, announcement, ariaLiveType = "assertive"}: Props
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden: React.CSSProperties = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,