bug: wrong chat bubble spacing in Safari when inside a column flex box

[tanguyMichardiere]

1. Checklist

• [X] I updated daisyUI (npm i -D daisyui@latest) but I still have this issue
• [X] I looked up into FAQ but I couldn't find a solution
• [X] I searched in existing issues and discussion forum but this bug has not addressed before
• [X] This bug is dasiyUI issue and it's NOT specific to a JS framework or a build tool."

2. What version of daisyUI are you using?

v3.9.2

3. Which browsers are you seeing the problem on?

Safari, Safari iOS

4. Reproduction URL

https://play.tailwindcss.com/3qawI5PSrj

5. Describe your issue

For the reproduction I copied the "Chat with image, header and footer" example from the daisyUI docs and wrapped it in a div with flex and flex-col (also occurs with flex-col-reverse). On Safari and Safari for iOS there is a lot of additional spacing, and the two chat elements overlap as a result:

After some testing, I didn't reproduce the bug with any of the other examples on the same docs page, except if I switch one of the chat-start with chat-end on "Chat with image". So it seems it occurs when there are both chat-start and chat-end bubbles, and chat-image.

[saadeghi]

This must be fixed already. Let me know if the issue still exists.

[tanguyMichardiere]

Unfortunately the problem is still here in version 4.4.4

[binitkumarshirsath]

Issue still exists.....

[binitkumarshirsath]

Better understanding of spaces

This is how it looks running locally.

Same code on deployment [Vercel]

[saadeghi]

Can you share a reproduction repo?

[binitkumarshirsath]

Here is the link of project i am working on. This one is deployed , you can make a dummy acc and check the chat section.

https://github.com/binitkumarshirsath/talkhub

[tanguyMichardiere]

It appears the bug is fixed in Safari for iOS 18 Developer Beta 1

[taropogi]

I'm encountering same issue. . . during development and production.