headlessui の Modal Dialog で画面が右にずれる
tailwindcssを使っているとheadlessuiやtailwinduiなどのComponentテンプレートを使うと思う。Modalを表示した時に元の画面が裏でスクロールするのを防ぐため下記のCSSが<html>タグに付与される。
overflow: hidden; padding-right: 15px;
これは右側のスクロールバーが消えるため、そのレイアウト崩れをさせないために15pxのpaddingを取っているのだが、上部固定のheaderなどをposition: fixed; text-align: center;で設定していると（fixedはwindowに対しての絶対位置で指定するため）中央の位置が若干右にずれて、Modal表示時にカクッとなってしまう。
MaterialUIであればscrollLock={false}のような設定ができるが、そもそも背面のViewのスクロールをロックするというのはUX的には正しい挙動だと思うので、CSSで頑張る。
結論、tailwindcssを使っているなら、headerにpx-2(padding-left: 15px; padding-right: 15px;)を指定してやっておけば最初の位置からずれないので解決する。
Author And Source
この問題について(headlessui の Modal Dialog で画面が右にずれる), 我々は、より多くの情報をここで見つけました https://qiita.com/maztak/items/8d8ffa9afa3067447159著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .