Scrollbar Issue In Chrome

[deepaksp]

Hi Guys,
I was testing tailwindcss in chrome (windows 10) and found this weird issue where scrollbar is not functioning properly ... it look like i have bigger div which making scrollbar kind of hidden transparent.

i have tested same in opera and its working fine, i wonder is this because i have zoomed my window screen to 109% and chrome actually use windows screensize and opera do not honor this setting.

screenshots

chrome

opera

[adamwathan]

Can you provide code? It's very unlikely this is actually a Tailwind issue and instead just a CSS issue.

[deepaksp]

here it is

<div class="flex bg-white border-b border-gray-200 fixed top-0 inset-x-0 z-100 h-16 items-center">
    <div class="w-full max-w-screen-xl relative mx-auto px-6">
        <div class="flex items-center -mx-6">
            <div class="lg:w-1/4 xl:w-1/5 pl-6 pr-6 lg:pr-8">
                <div class="flex items-center">
                    <a href="https://github.com/tailwindcss/tailwindcss/releases"
                       class="hidden lg:block font-semibold text-base text-gray-500 hover:text-gray-700">
                        v1.0.0-beta.3
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="container">
    <div class="bg-gray-900" style="height: 900px;"></div>
</div>

[adamwathan]

Sorry I'm confused, is this a problem you are having in your own project or a problem you are seeing on our documentation site?

[deepaksp]

in my project .. site is working fine

[deepaksp]

i was working / changing my bootstrap code to tailwindcss but after sometime i relized something is wrong with scrollbar

there for i used code from tailwindcss site but i had same issue, thrfor i used this code here for demo

[adamwathan]

Can you create a JSFiddle or similar where I can actually see the site? Or at least post a screenshot of a larger chunk of the UI, or record a video or similar? It's very hard to tell from the screenshot what the problem is.

Does the problem go away if you write the CSS by hand instead of using Tailwind? If not then it's definitely not a Tailwind problem.

[deepaksp]

here is live site

https://iamdeepak.io/tw.html

[deepaksp]

interesting .. after putting code online its working fine ! but not in localhost.
i think , i should test again

[deepaksp]

will test and let you know .. if still having issue.
thank you for help.

[armstrong99]

having the same issues working with tailwind, my scroll bar on chrome is kind of transparent and not working. But using css by and works fine

[igortrinidad]

For those who are getting this trouble with Tailwind transparent scrollbar, i have to add some workaround in overflow-x-auto and overflow-y-auto classes:

.overflow-x-auto::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

.overflow-x-auto::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar {
  display: block;
}

.overflow-x-auto::-webkit-scrollbar-track, .overflow-y-auto::-webkit-scrollbar-track {
  background-color: #F7F7F7 !important;
  border-radius: 2px !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb {
  border-radius: 10px !important;
  background-color: #CDCCCC !important; 
}

Some styles are custom, so you may need add your own to your app...

[yechalede]

having the same issues working with tailwind, I got three different scroll bars on (chrome ,firefox,edge)