scrollbar appears despite using tailwind's overflow-auto

[brunomorency]

Current Behavior

My layout contains a few elements with overflowing content. They're set with overflow-y-auto so that the scroll bar doesn't show up unless we're scrolling. Adding stwui/plugin to tailwind's plugins makes the scrollbar always visible (you can actually see it on you doc page).

Expected Behavior

Elements with overflowing content don't have scrollbars when they have tailwind's overflow-y-auto class

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

I've traced the issue to these lines in plugin/base https://github.com/N00nDay/stwui/blob/90a6b7a0a7599d6790b54dae15e640f8e5b3e3cf/src/lib/plugin/base/index.js#L148

    '::-webkit-scrollbar': {
        width: '0.5rem'
    },
    '::-webkit-scrollbar:horizontal': {
        height: '0.5rem',
        'max-height': '0.5rem'
    },

Not sure what these are for but removing them gets rid of the issue.

[N00nDay]

I am unable to reproduce this behavior. A few things:

1. What page on the docs are you referring to as I am not seeing this? What browser are you using? what device? One of those may be the reason I am not seeing it and you are.

2. The code you are sighting should only effect the width of the scrollbar when it’s vertical and the height when it is horizontal.

On Tue, Oct 31, 2023 at 6:01 PM Bruno Morency @.***> wrote:

Current Behavior

My layout contains a few elements with overflowing content. They're set with overflow-y-auto so that the scroll bar doesn't show up unless we're scrolling. Adding stwui/plugin to tailwind's plugins makes the scrollbar always visible (you can actually see it on you doc page). Expected Behavior

Elements with overflowing content don't have scrollbars when they have tailwind's overflow-y-auto class Steps To Reproduce

No response Link to Reproduction / Stackblitz

No response More Information

I've traced the issue to these lines in plugin/base

https://github.com/N00nDay/stwui/blob/90a6b7a0a7599d6790b54dae15e640f8e5b3e3cf/src/lib/plugin/base/index.js#L148 http://url

'::-webkit-scrollbar': { width: '0.5rem' }, '::-webkit-scrollbar:horizontal': { height: '0.5rem', 'max-height': '0.5rem' },

Not sure what these are for but removing them gets rid of the issue.

— Reply to this email directly, view it on GitHub https://github.com/N00nDay/stwui/issues/183, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG3TJVL5LE5BXF22ZGPGEZDYCFYKRAVCNFSM6AAAAAA6YMSNR6VHI2DSMVQWIX3LMV43ASLTON2WKOZRHE3TCMZWGE3TAMQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[brunomorency]

See the screenshot below, the scrollbar is visible despite that element having overflow-y-auto which should not keep it always visible. This happens on both Chrome and Safari. If you remove the stwui plugin from the tailwind.config.js file, it should disappear.

Let me know if you still can't replicate the issue. If so, I'll create two small SvelteKit apps with and without stwui to show the difference.

[N00nDay]

I see what you are getting at now, I was miss-understanding. I don't have an issue removing this from the package as this comes down to personal preference to me so it should be left up to the developer on whether to show the scrollbar constantly or not. The fix has been made but most likely won't be published to later this week.

[brunomorency]

Awesome! Thanks for fixing this. No rush on getting this published, I'm still in dev myself ... and your package is clearly labeled as under developement so not I'm not expecting express fixes :)

FYI: Testing further after posting the issue, the other styles related to -webkit-scrollbar just below the two declaration mentioned in the initial comment also created unexpected scrollbars behaviour.

[N00nDay]

What is unexpected. Can you provide more information? Is it the coloring? This was set up before I built out the theme customization and there was only a light and dark mode. May be time to remove it all together and leave it up to the developer to decide what to do with the scrollbar.

[brunomorency]

I was trying to record the screen showing it but, or course, I can't make it happen again :-/ If I can reproduce I'll let you know. Feel free to ignore that last comment until I do.

... but yeah, I agree it would be better to let the developer decide how to style the scrollbar given tailwind offers a bunch of options to control that easily.

[N00nDay]

All scrollbar styling will be removed in the next update to allow developers more styling flexibility. Work on this but may not happen until Monday.