bug: Visual glitch in collapse component inside a flex with unset width

loremus commented 6 days ago

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

Edge

Reproduction URL

...

Describe your issue

I am experiencing a visual glitch with the collapse component inside a flex, where the collapse's content is a scrollable list of items.

The structure I use is similar to this:

<div class="collapse">
  <input type="checkbox" />
  <div class="collapse-title">Title</div>
  <div class="collapse-content">
   ...
  </div>
</div>

The collapse class contains the following:

<div class="collapse basis-[95%] rounded-l-lg bg-primary-500 bg-gradient-to-tr from-primary-700 to-primary-500 bg-origin-border shadow-md transition-all duration-300 ease-out">

The bug: When the basis value is below 96% or a specific width is set, the component works as expected. However, when the basis is set to 96% or more, a visual glitch appears (refer to attached GIFs).

collapse-expected collapse-glitch

The only difference between these two builds is the basis value.

I apologize for not providing a reproduction link, as the issue is very specific. I understand that it might not be solvable from my example alone. I'm just posting in case someone might know a solution or the root of this issue.

github-actions[bot] commented 6 days ago

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

loremus commented 6 days ago

UPD: The glitch also disappears while an identical collapsible element below the element in question is open.

collapse-3

loremus commented 1 day ago

Resolved. The issue was not caused by DaisyUI

saadeghi / daisyui