docs: describe automatic scrollbar gutter detection (saadeghi#4169)

pdanpdan · saadeghi · web-flow · commit a382f405e2ec · 2025-10-11T14:01:39.000+03:00
* docs: describe automatic scrollbar gutter detection ref saadeghi#4086 * format --------- Co-authored-by: Pouya Saadeghi <pouya.saadeghi@gmail.com>
diff --git a/packages/docs/src/routes/(routes)/components/drawer/+page.md b/packages/docs/src/routes/(routes)/components/drawer/+page.md
@@ -59,7 +59,8 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 
 > :INFO:
 >
-> Opening a drawer adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.  
+> Opening a drawer adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.
+> On recent Chromium based browsers vertical scrollbar presence is detected automatically. On Safari and on mobile devices the scrollbar is displayed as overlay so there will not be gutter. On Firefox you need to detect the presence of vertical scrollbar and set the `scrollbar-gutter: stable` or `scrollbar-gutter: unset` on `:root` element yourself.
 > If you don't want to use this feature, [you can exclude `rootscrollgutter`](/docs/config/#exclude).
 
 ### ~Drawer sidebar
diff --git a/packages/docs/src/routes/(routes)/components/modal/+page.md b/packages/docs/src/routes/(routes)/components/modal/+page.md
@@ -54,7 +54,8 @@ classnames:
 
 > :INFO:
 >
-> Opening a modal adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.  
+> Opening a modal adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.
+> On recent Chromium based browsers vertical scrollbar presence is detected automatically. On Safari and on mobile devices the scrollbar is displayed as overlay so there will not be gutter. On Firefox you need to detect the presence of vertical scrollbar and set the `scrollbar-gutter: stable` or `scrollbar-gutter: unset` on `:root` element yourself.
 > If you don't want to use this feature, [you can exclude `rootscrollgutter`](/docs/config/#exclude).
 
 ## Method 1. HTML dialog element `recommended`

Original file line number	Diff line number	Diff line change
@@ -59,7 +59,8 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
`59`	`59`
`60`	`60`	`> :INFO:`
`61`	`61`	`>`
`62`		`-> Opening a drawer adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.`
	`62`	`+> Opening a drawer adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.`
	`63`	+> On recent Chromium based browsers vertical scrollbar presence is detected automatically. On Safari and on mobile devices the scrollbar is displayed as overlay so there will not be gutter. On Firefox you need to detect the presence of vertical scrollbar and set the `scrollbar-gutter: stable` or `scrollbar-gutter: unset` on `:root` element yourself.
`63`	`64`	> If you don't want to use this feature, [you can exclude `rootscrollgutter`](/docs/config/#exclude).
`64`	`65`
`65`	`66`	`### ~Drawer sidebar`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,8 @@ classnames:`
`54`	`54`
`55`	`55`	`> :INFO:`
`56`	`56`	`>`
`57`		`-> Opening a modal adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.`
	`57`	`+> Opening a modal adds a [scrollbar-gutter](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter) to the page to avoid layout shift on operating systems that have a fixed scrollbar.`
	`58`	+> On recent Chromium based browsers vertical scrollbar presence is detected automatically. On Safari and on mobile devices the scrollbar is displayed as overlay so there will not be gutter. On Firefox you need to detect the presence of vertical scrollbar and set the `scrollbar-gutter: stable` or `scrollbar-gutter: unset` on `:root` element yourself.
`58`	`59`	> If you don't want to use this feature, [you can exclude `rootscrollgutter`](/docs/config/#exclude).
`59`	`60`
`60`	`61`	## Method 1. HTML dialog element `recommended`