Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
beegotsy opened this issue Nov 8, 2024 · 4 comments

Comments

@beegotsy
Copy link

beegotsy commented Nov 8, 2024

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.

Copy link

github-actions bot commented Nov 8, 2024

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 beegotsy changed the title bug: spacing between .chat-bubble and .chat-bubble:before is wrong in 4K with 125% zoom bug: spacing between .chat-bubble and .chat-bubble:before is wrong in 4K with 125% or 175% zoom Nov 8, 2024
@beegotsy beegotsy changed the title bug: spacing between .chat-bubble and .chat-bubble:before is wrong in 4K with 125% or 175% zoom bug: spacing between .chat-bubble and .chat-bubble:before is wrong in 4K with various zooms Nov 8, 2024
@beegotsy
Copy link
Author

beegotsy commented Nov 8, 2024

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
Copy link
Owner

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

@beegotsy
Copy link
Author

@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]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants