search

kobaltedev / kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS.
https://kobalte.dev
MIT License
1.2k stars 61 forks source link

[select]: weird overlay behavior #107

Closed infi-pc closed 3 months ago

infi-pc commented 1 year ago

Describe the bug weird behavior when opening Select. on desktop, it shows scrollbars, and on mobile it flickers

To Reproduce try opening any Select in the documentation

Expected behavior should not happen

Screenshots

https://user-images.githubusercontent.com/2264725/216392327-18d0aefc-feff-44ce-81dd-728547529a8f.mp4

https://user-images.githubusercontent.com/2264725/216392592-a86135b4-fd48-4cd7-9182-99e06b8b2dff.MP4

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context I am not sure if it is problem of the library or the documentation, but it seems a bit annoying.

goenning commented 1 year ago

I noticed the same behaviour on the DropdownMenu on mobile.

fabien-ml commented 1 year ago

It might be related to how Kobalte handle scroll lock when a modal is open. I haven't had time to dig into it yet.

MustagheesButt commented 1 year ago

Seems to be fixed, tried on Android Chrome and iOS Safari. DropdownMenu still causing some flicker on iOS Safari

fabien-ml commented 1 year ago

Seems to be fixed, tried on Android Chrome and iOS Safari. DropdownMenu still causing some flicker on iOS Safari

No, there is no flicker with Select on the doc because now Select is not modal by default. I've changed the scroll lock logic but the issue is still here in "modal mode".

jer3m01 commented 3 months ago

Changed the scroll lock implementation and this seems fixed.