bug: scrollbar-color causing unnecessary repaints

[CarlosBalladares]

What version of daisyUI are you using?

4.12.8

Which browsers are you seeing the problem on?

Edge Version 127

Reproduction URL

https://gph5tr-5173.csb.app/

Describe your issue

A css rule causes unnecessary repaints.

*:hover{
  scrollbar-color: ....
}

This rule is causing some unnecessary repaints when you hover any html element in the page.

To visualize in devtools enable paint flashing and hover over the two square boxes or any html element in the example link. Although nothing changes a paint flash appears when you hover the element. This behaviour stops when you remove the css selectors related to the scollbar color. This is also present in the daisyui homepage.

Potential solutions:

Remove this selector and add a utility class to customize the scrollbar only where needed.

[github-actions]

Thank you @CarlosBalladares for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[CarlosBalladares]

this is the css rule

daisyui/src/base/general.css

Lines 5 to 11 in e3cd43a

	/* scrollbar color */
	* {
	scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
	&:hover {
	scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
	}
	}

[binkybarnes]

with scrollbar-color in place, i cant customize the scrollbar with webkit

[danterohlin]

Is it a fix yet? Do I have to remove daisyui now to be able to style scrollbar?

[saadeghi]

@danterohlin @binkybarnes
This issue is not about changing the color, it's about the performance of applying hover style for all elements which is unnecessary.

You can style the scrollbar using CSS scrollbar-color:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

Example with Tailwind CSS utility classes:

class="[scrollbar-color:blue_yellow]"

In case you're using ::-webkit-scrollbar to style the scrollbar, it's a non standard CSS rule and will be removed from the browsers in the future. Ue the standard CSS scrollbar-color instead.

Also, this is one of the base styles. Which means can be disabled from config. Docs:
https://daisyui.com/docs/config/#base

[Muhammed-Rahif]

@danterohlin @binkybarnes both are correct. I can't customize scrollbar in any way when daisyui.com/docs/config#base is enabled (default). Disabling the base removes the colors, which I do not want to happen.

This issue is not about customizing scrollbar, even though the solution provided by the author fixes the scrollbar customization issue:

Remove this selector and add a utility class to customize the scrollbar only where needed.