fix(modal): fixing scrollbar flickers

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/modal/examples/animation.css

@@ -11,11 +11,11 @@
 }
 
 .my-animation.modal-closing {
-  animation: modalClose 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  animation: modalClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
 }
 
 .my-animation.modal-closing::backdrop {
-  animation: modalFadeOut 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+  animation: modalFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
 }
 
 @keyframes modalOpen {

apps/website/src/routes/docs/headless/(components)/modal/examples/sheet.tsx

@@ -22,11 +22,11 @@ export default component$(() => {
   }
   
   .sheet.modal-closing {
-    animation: sheetClose 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    animation: sheetClose 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
   
   .sheet.modal-closing::backdrop {
-    animation: sheetFadeOut 0.45s forwards cubic-bezier(0.6, 0.6, 0, 1);
+    animation: sheetFadeOut 0.35s forwards cubic-bezier(0.6, 0.6, 0, 1);
   }
   
   @keyframes sheetOpen {

apps/website/src/routes/docs/headless/(components)/modal/examples/transition.tsx

@@ -16,7 +16,7 @@ export default component$(() => {
 
     .my-transition, .my-transition::backdrop {
         opacity: 0;
-        transition: opacity 500ms ease;
+        transition: opacity 300ms ease;
     }
 
     .my-transition.modal-showing, .my-transition.modal-showing::backdrop {

package.json

@@ -55,6 +55,7 @@
     "@storybook/test-runner": "^0.13.0",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/cypress": "9.0.0",
+    "@types/body-scroll-lock": "3.1.1",
     "@types/eslint": "^8.44.2",
     "@types/node": "^20.5.7",
     "@typescript-eslint/eslint-plugin": "^5",
@@ -64,6 +65,7 @@
     "all-contributors-cli": "^6.26.1",
     "autoprefixer": "^10.4.15",
     "axe-core": "^4.7.2",
+    "body-scroll-lock": "4.0.0-beta.0",
     "chromatic": "^6.24.1",
     "clipboard-copy": "4.0.1",
     "commitizen": "^4.3.0",

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -5,6 +5,8 @@ export type WidthState = {
   width: number | null;
 };
 
+import { clearAllBodyScrollLocks } from 'body-scroll-lock';
+
 /**
  * Traps the focus of the given Modal
  * @returns FocusTrap
@@ -72,44 +74,6 @@ export function wasModalBackdropClicked(
   return wasBackdropClicked;
 }
 
-/**
- * Locks scrolling of the document.
- */
-export function lockScroll(scrollbar: WidthState) {
-  if (scrollbar.width === null) {
-    scrollbar.width = window.innerWidth - document.documentElement.clientWidth;
-  }
-
-  window.document.body.style.overflow = 'hidden';
-  document.body.style.paddingRight = `${scrollbar.width}px`;
-}
-
-/**
- * Unlocks scrolling of the document.
- * Adjusts padding of the given scrollbar.
- */
-export function unlockScroll() {
-  window.document.body.style.overflow = '';
-  document.body.style.paddingRight = '';
-}
-
-/**
- * When the Modal is opened we are disabling scrolling.
- * This means the scrollbar will vanish.
- * The scrollbar has a width and causes the Modal to reposition.
- *
- * That's why we take the scrollbar-width into account so that the
- * Modal does not jump to the right.
- */
-export function adjustScrollbar(scrollbar: WidthState, modal: HTMLDialogElement) {
-  if (scrollbar.width === null) {
-    scrollbar.width = window.innerWidth - document.documentElement.clientWidth;
-  }
-
-  modal.style.left = 0 + 'px';
-  document.body.style.paddingRight = `${scrollbar.width}px`;
-}
-
 export function overrideNativeDialogEscapeBehaviorWith(continuation: () => void) {
   return function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') {
@@ -120,27 +84,6 @@ export function overrideNativeDialogEscapeBehaviorWith(continuation: () => void)
   };
 }
 
-/**
- * When the Modal is closed we are enabling scrolling.
- * This means the scrollbar will reappear in the browser.
- * The scrollbar has a width and causes the Modal to reposition.
- *
- * That's why we take the scrollbar-width into account so that the
- * Modal remains in the same position as before.
- */
-export function keepModalInPlaceWhileScrollbarReappears(
-  scrollbar: WidthState,
-  modal?: HTMLDialogElement,
-) {
-  if (!modal) return;
-
-  if (scrollbar.width) {
-    const modalLeft = parseInt(modal.style.left);
-
-    modal.style.left = `${scrollbar.width - modalLeft}px`;
-  }
-}
-
 /*
  * Adds CSS-Class to support modal-opening-animation
  */
@@ -162,11 +105,13 @@ export function supportClosingAnimation(
   const { animationDuration, transitionDuration } = getComputedStyle(modal);
 
   const runAnimationEnd = () => {
+    clearAllBodyScrollLocks();
     modal.classList.remove('modal-closing');
     afterAnimate();
   };
 
   const runTransitionEnd = () => {
+    clearAllBodyScrollLocks();
     modal.classList.remove('modal-closing');
     afterAnimate();
   };
@@ -177,6 +122,7 @@ export function supportClosingAnimation(
     modal.addEventListener('transitionend', runTransitionEnd, { once: true });
   } else {
     modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
     afterAnimate();
   }
 }

packages/kit-headless/src/components/modal/modal.tsx

@@ -11,20 +11,17 @@ import {
   useTask$,
 } from '@builder.io/qwik';
 import {
-  WidthState,
   activateFocusTrap,
-  adjustScrollbar,
   closeModal,
   deactivateFocusTrap,
-  keepModalInPlaceWhileScrollbarReappears,
-  lockScroll,
   overrideNativeDialogEscapeBehaviorWith,
   showModal,
   trapFocus,
-  unlockScroll,
   wasModalBackdropClicked,
 } from './modal-behavior';
 
+import { disableBodyScroll, type BodyScrollOptions } from 'body-scroll-lock';
+
 import styles from './modal.css?inline';
 
 export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
@@ -38,7 +35,10 @@ export type ModalProps = Omit<QwikIntrinsicElements['dialog'], 'open'> & {
 export const Modal = component$((props: ModalProps) => {
   useStyles$(styles);
   const modalRefSig = useSignal<HTMLDialogElement>();
-  const scrollbar: WidthState = { width: null };
+
+  const scrollOptions: BodyScrollOptions = {
+    reserveScrollBarGap: true,
+  };
 
   const { 'bind:show': showSig } = props;
 
@@ -58,19 +58,16 @@ export const Modal = component$((props: ModalProps) => {
 
     if (isOpen) {
       showModal(modal);
+      disableBodyScroll(modal, scrollOptions);
       props.onShow$?.();
-      adjustScrollbar(scrollbar, modal);
       activateFocusTrap(focusTrap);
-      lockScroll(scrollbar);
     } else {
-      unlockScroll();
       closeModal(modal);
       props.onClose$?.();
     }
 
     cleanup(() => {
       deactivateFocusTrap(focusTrap);
-      keepModalInPlaceWhileScrollbarReappears(scrollbar, modalRefSig.value);
     });
   });