Skip to content

(spindle-ui): SemiModalのデザインがブラウザによって異なる #786

@yanagi0602

Description

@yanagi0602

概要

SemiModalを利用した際にブラウザ間でデザイン差分が生まれているが、これは意図した挙動でしょうかという質問になります。

バージョン

0.62.1

具体的な内容

SemiModalのStoryでSemiModal内の.spui-SemiModal-contents要素を確認すると、以下のような差分が存在します。

Chrome

コンテンツの右側の余白が広い

Safari

コンテンツの右側の余白が広い

FireFox

コンテンツが幅いっぱいに表示されている

差分が生まれている理由

FireFoxはスクロールバーの領域を確保せず、Safari・Chromeはoverflowコンテンツの有無に関わらずスクロールバーの領域を確保するためこの差分が生まれていそうです。

Chromeでのスクロール可能状態

Chromeでスクロール可能な状態のスクリーンショット

FireFoxでのスクロール可能状態

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions