saadeghi / daisyui

๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ ๐ŸŒผ โ€ƒThe most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: spacing between .chat-bubble and .chat-bubble:before is wrong in 4K with various zooms #3265

Closed beegotsy closed 11 hours ago

beegotsy commented 1 week ago

What version of daisyUI are you using?

The one in daisyui.com

Which browsers are you seeing the problem on?

Atleast Chrome

Reproduction URL

https://daisyui.com/components/chat/

Describe your issue

Hi there,

the .chat-bubble:before is separated from the .chat-bubble on 3840x2160 monitor and while using a 25%, 75%, 125%, 175% browser zoom and a 150% Windows zoom (if that matters).

Screenshots below for the 125% browser zoom version, on Chrome

image

image

It doesn't really matter to me, but I just wanted to let you know if it does to you. Kudos for the library.

github-actions[bot] commented 1 week ago

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

beegotsy commented 1 week ago

The same happens for the tooptip here: https://daisyui.com/components/tooltip/.

This time, on a 3840x2160 monitor, it only connects when using a browser zoom of 67%, 90%, 200%, 250%, 400%. This may be "more important" (it really isn't), as it's disconnected at the default 100% zoom.

100% image

125% image

500% image

saadeghi commented 6 days ago

Which OS is this?
This looks like a render issue, because there's no space there in CSS.

beegotsy commented 11 hours ago

@saadeghi thank you for the answer; it indeed seems a render issue. On my Windows 10 with Chrome 123.0.6312.124 it doesn't work; but on my Windows 11 with 131.0.6778.86 works fine.

> ver
Microsoft Windows [Version 10.0.19045.5131]