scrollbar-default does not work on webkit browser

[eyupaltindal]

I have some problem with webkit browsers.

scrollbar-hide class works as perfect. but i want to show it with scrollbar-default class, scrollbar is visible on webkit browser. it works on firefox.

i need help with that issue. thanks.

[reslear]

show you full class case

[eyupaltindal]

My code like this;

<div class='tw-layout-container tw-pb-12 md:tw-pb-20'>
  <pm-ui-lp-section-header>Psikolojik Konular</pm-ui-lp-section-header>
  <div class='tw-flex tw-gap-4 md:tw-gap-5 tw-overflow-x-auto tw-scrollbar-hide md:tw-scrollbar-default'>
    <div class='tw-flex-shrink-0' *ngFor='let evergreenPost of evergreenPosts'>
      <shared-ui-button buttonSize='large'>{{evergreenPost.title}}</shared-ui-button>
    </div>
  </div>
</div>

This is with Firefox

This is with Chrome

[reslear]

Yes, you are right, I investigated that webkit not support overriding

::-webkit-scrollbar cannot be simply overridden to get the default style, the only way to do it is to remove all ::-webkit-scrollbar rules from the code. At that point, scrollable areas have to be forced to redraw the scrollbars. To do that you either quickly add and remove display:none; from or do the same thing with overflow:hidden; on scrollable elements. The problem with the first one is that the page flashes white at every page load; the second one is resource-intensive as it would have to whether check any element on the page overflows—not ideal.
https://webapps.stackexchange.com/a/26128

For a workaround use desktop first breakpoint system or dynamic remove class with script
example in you case https://play.tailwindcss.com/DfHZcGih7B?size=598x720

[reslear]

so @eyupaltindal no need scrollbar-default use https://tailwindcss.com/blog/tailwindcss-v3-2#max-width-and-dynamic-breakpoints

like: max-md:scrollbar-hide