bug: Absolute component with relative parent overflow the drawer-content and break the viewport in v3 (IOS)

[nabilfatih]

What version of daisyUI are you using?

v3.1.0

Describe your issue

Hello, I've encountered a bug in the latest version (v3) of daisyUI on iOS devices (iPhone and iPad). The issue is related to an absolute positioned component within a relatively positioned parent, which causes the drawer-content to overflow and break the viewport. (Note that in v2 it works perfectly fine)

On desktop devices, the layout works perfectly fine and there are no issues. However, when I switch to my iPhone or iPad, the layout breaks and becomes unusable. Here are the screenshots to illustrate the problem:

• Desktop using windows and macOS:

• Ipad (Chrome):
  

• Ipad (Safari):
  

here is a code snippet of that form bottom that demonstrates the problematic layout:

<main className="relative overflow-x-hidden text-sm scrollbar-hide">
   <section
      className={`container mx-auto h-screen max-w-7xl overflow-x-hidden`}
      >
      <!-- Virtualized Chat Message -->
   </section>
   <div class="absolute">
      <!-- The Form -->
   </div>
</main>

(Note: in v2 it works perfectly fine)

What browsers are you seeing the problem on?

Chrome, Safari, Edge

Reproduction URL (optional)

No response

[saadeghi]

fixed in 4.7.0