bug: Blurry text/rendering in Drawer component on Chrome/Windows

[molavec]

Reproduction URL (Required)

https://workspices.online

What version of daisyUI are you using?

5.5.20

Which browsers are you seeing the problem on?

Chrome

Describe your issue

When using the Drawer component, the content inside .drawer-side appears blurry (subpixel antialiasing is disabled) while it is open. This is particularly noticeable on Chrome/Edge on Windows, especially on monitors with fractional scaling (e.g., 125% or 150%).

Steps to reproduce

1. Create a standard DaisyUI drawer (.drawer, .drawer-side, etc.).
2. Add text and standard UI elements inside the sidebar content.
3. Open the drawer in Google Chrome on Windows.
4. Compare the text sharpness inside the drawer with the text outside. The drawer text looks noticeably blurred/faded.

NOTE: It is a little difficult to reproduce. Perhaps a color selection or another element within the Drawer is causing the problem in Chrome. To be transparent, I updated Daisy but the problem started when I updated styles and components inside drawer.

In my case, I can resolved adding the next code in my vue component (solution proposed by Gemini IA) and fixed the problem 🔥👏👏👏

<style>
/* Fix for blurry text on Chrome/Windows caused by daisyUI's transform and will-change */
.drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
  transform: none !important;
  will-change: auto !important;
}
</style>

Expected behavior

After the drawer finishes its slide-in animation, it should restore standard subpixel text antialiasing and render sharply.

Root Cause

The issue stems from the CSS rules applied when the drawer is open:

.drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
  transform: translateX(0%);
}

Along with the base .drawer-side element having will-change: transform, opacity;.

Because a transform (even 0%) and will-change are actively applied while the drawer is open, Chromium forces the element to remain on a hardware-accelerated compositor layer. This permanently disables subpixel antialiasing (ClearType) for the element and its children, causing the blurriness.

Proposed Solution

We can fix this by removing the transform and resetting will-change once the drawer is checked/open. Browsers can perfectly interpolate a transition from translateX(100%) (or -100%) to transform: none.

/* Proposed fix for the open state */
.drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
  transform: none;
  will-change: auto;
}

By explicitly setting transform: none and will-change: auto, the browser releases the element from the GPU layer once the transition completes, instantly restoring pixel-perfect text rendering.

[github-actions]

Thank you @molavec 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.

[saadeghi]

Can you please share a video of the issue?

[molavec]

Hi @saadeghi

Here is the video link:
https://berrycast.queonda.art/conversations/7b173028-2546-5987-965d-b3a76a0e60d9

The video compression does not allow for seeing the true blurry effect. For that reason, attach these images:

Drawer with blur:

Drawer without blur:

I don't believe this is an obvious problem "related to daisyui itself." It's more about how browsers and hardware work. As I said in the video, another app had the same annoying blurry effect, but they fixed it. This issue didn't happen on all PCs.

[saadeghi]

@molavec Thanks for the video and for the details.

Can you please check if the issue is visible here:
https://play.tailwindcss.com/dFU6pl6kTp?file=css

and it's fixed here?
https://play.tailwindcss.com/ER2ndJV0uj?file=css

[molavec]

Hi @saadeghi

Great!

You were able to replicate the problem.

It's quite obvious in the text Sidebar Item 1 and Sidebar Item 2.

I also added some additional text sizes and a red div to see if the difference is more visible.

Chrome version:

light_blurry:

light_not_blurry:

dark_blurry:

dark_not_blurry:

dark_red_square_blurry:

dark_red_square_not_blurry:

[saadeghi]

Well, I see the issue in your video but can't see it on my machine.

Good that you already found the fix 🫡
Will be fixed soon in daisyUI 5.5.21

Great fix! This issue had been bothering me for a long time.