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

Safari macOS : Popup is blurred on non HiDPI Screen #363

Open
Write opened this issue Feb 19, 2024 · 5 comments
Open

Safari macOS : Popup is blurred on non HiDPI Screen #363

Write opened this issue Feb 19, 2024 · 5 comments
Labels
bug Something isn't working

Comments

@Write
Copy link

Write commented Feb 19, 2024

bug description

Any .popup windows appear blurred on Safari, caused by transform: translate(-50%,-50%); in .popup.visible css declaration.
This does not happen on firefox

reproduction steps
steps to reproduce the behavior:

  1. click on any links at the bottom that popup a windows
  2. text is blurred

screenshots

With transform: translate(-50%,-50%); :

Screenshot du 2024-02-19 à 11 12 05

With transform: translate(-50%,-50%); in .popup.visible and transform: translate(-50%,-48%)scale(.95); in .popup unticked in dev tools :

Screenshot du 2024-02-19 à 11 15 03

It still show as slightly blurred though.

On Firefox (same platform), the result is prefect :

Screenshot du 2024-02-19 à 11 16 16

platform

  • OS : macOS

  • browser Safari / This does not happen on firefox

  • version : Version 17.3.1 (19617.2.4.11.12) / Sonoma 14.3.1

Note : This issue seems to only affect external-no HiDPI screen on macOS. While Firefox handles it fine.
I directly checked cobalt on my MBP Native screen and it renders sharply.
Not sure if there's a workaround.

@Write Write added the bug Something isn't working label Feb 19, 2024
@Write Write changed the title Safari macOS : Transform CSS Property on .popup.visible cause it to appear slightly blurred. Safari macOS : Popup is blurred on non HiDPI Screen Feb 19, 2024
@wukko
Copy link
Member

wukko commented Apr 9, 2024

does this happen only when switching windows between HiDPI screen and laptop screen?

@Write
Copy link
Author

Write commented Apr 9, 2024

does this happen only when switching windows between HiDPI screen and laptop screen?

I never switch between the two because my mbp is always in clamshell mode.
So assume all my screen are not in HiDPI mode and there's no switch.

So no, it happens all the time on non-HiDPI screen with Safari.
On Firefox, like said before, works fine.

Anyway that's such a small issue… Not sure it's worth the time debugging it.

I'm still kinda surprised I couldn't find a css rule that make its render sharply on Safari, I haven't dug in too much though.

@wukko
Copy link
Member

wukko commented Apr 9, 2024

does it still happen? i tuned css a bit in the last month

Not sure it's worth the time debugging it

frontend will be (eventually) rewritten in svelte, so yeah, not really

@Write
Copy link
Author

Write commented Apr 9, 2024

does it still happen? i tuned css a bit in the last month

Not sure it's worth the time debugging it

frontend will be (eventually) rewritten in svelte, so yeah, not really

Oh yeah, popup only, everything else is crystal clear. I have watchtower so I'm using the latest build

Screenshot du 2024-04-09 à 08 06 07

Rest of the UI crystal clear 👍
Screenshot du 2024-04-09 à 08 07 00

frontend will be (eventually) rewritten in svelte, so yeah, not really

Well feel free to close the issue, honestly.

@wukko
Copy link
Member

wukko commented Apr 9, 2024

feel free to close the issue

i'll keep it around just in case the issue sticks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants