bug: The drawer crashes the browser when you click the button to open it after copying text from the page

[wisepythagoras]

Reproduction URL (Required)

https://daisyui.com/components/drawer/

What version of daisyUI are you using?

No response

Which browsers are you seeing the problem on?

Any Chrome-based browser

Describe your issue

Description

If you click the "Open drawer" button the drawer opens as expected. However, if you mark and copy any text on the page and click the "Open drawer" button, the Chrome tab crashes completely, as shown below in the screen grab

Chrome:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

OS: Windows 11 / Ubuntu 26.04

I've tried the latest release of Daisy and Tailwind and it still happens. We've noticed this on our own app as well as the example page. We also tested Microsoft Edge (can repro) and Firefox (works as expected).

Demo

chrome_vc3TjlTdh8.mp4

[github-actions]

Thank you @wisepythagoras 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]

Well, this would be hard to reproduce…
Definitely a Chrome bug but if we can find the exact CSS rule that is causing this, maybe we can rewrite it in another way to avoid this bug.

Can you also test in another browser to see if the same thing happens or not?

[pdanpdan]

I think it's a chrome bug in current stable.
I can reproduce it on Linux and android.
I'll test who is generating the crash

[wisepythagoras]

@saadeghi It seems to be every Chrome-based browser. Firefox is fine and from what a teammate said, Safari is also ok (But I don't have a Mac so I can't verify)

[pdanpdan]

It is crashing because of the animation in

:where(:root:has(&:checked)) {
  --page-has-backdrop: 1;
  --page-overflow: hidden;
  --page-scroll-bg: var(--page-scroll-bg-on);
  --page-scroll-gutter: stable;
  --page-scroll-transition: var(--page-scroll-transition-on);
  animation: set-page-has-scroll forwards;
  animation-timeline: scroll();
}

The strange thing is that the same styles do not crash in modal.
I'll dig more, maybe i can identify the crash source

[pdanpdan]

This is a stand-alone reproduction of problem:
https://play.tailwindcss.com/uFo2MTdtlb?file=css
https://play.tailwindcss.com/9KnL3c3MvK?file=css - overflow on window is not needed for repro
The combination of translate on button with the scroll.
Need further investigation

Issue opened on chromium: https://issues.chromium.org/issues/522247742