github-starred/cobalt
2
0
Fork 0
mirror of https://github.com/imputnet/cobalt.git synced 2026-11-13 03:13:06 -06:00
Code Issues 5.8k Packages Projects Releases Wiki Activity

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

New Issue
Closed
opened 2025-11-09 09:43:10 -06:00 by GiteaMirror · 5 comments
GiteaMirror commented 2025-11-09 09:43:10 -06:00
Owner
Copy Link
Copy Source

Originally created by @Write on GitHub (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.

Originally created by @Write on GitHub (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](https://github.com/wukko/cobalt/assets/541722/13934ebc-eb30-468d-98f2-edb8f765beb8) 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](https://github.com/wukko/cobalt/assets/541722/a6114c29-7d26-4c69-8379-acaf14c0cf7c) It still show as slightly blurred though. On Firefox (same platform), the result is prefect : ![Screenshot du 2024-02-19 à 11 16 16](https://github.com/wukko/cobalt/assets/541722/e71ed87a-be0a-451b-8754-654a887b07d5) **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.
GiteaMirror added the bugnext major labels 2025-11-09 09:43:10 -06:00
GiteaMirror commented 2025-11-09 09:43:11 -06:00
Author
Owner
Copy Link
Copy Source

@wukko commented on GitHub (Apr 9, 2024):

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

@wukko commented on GitHub (Apr 9, 2024): does this happen only when switching windows between HiDPI screen and laptop screen?
GiteaMirror commented 2025-11-09 09:43:11 -06:00
Author
Owner
Copy Link
Copy Source

@Write commented on GitHub (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.

@Write commented on GitHub (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.
GiteaMirror commented 2025-11-09 09:43:11 -06:00
Author
Owner
Copy Link
Copy Source

@wukko commented on GitHub (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

@wukko commented on GitHub (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
GiteaMirror commented 2025-11-09 09:43:11 -06:00
Author
Owner
Copy Link
Copy Source

@Write commented on GitHub (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.

@Write commented on GitHub (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](https://github.com/wukko/cobalt/assets/541722/e358e008-91a7-457a-bc33-64537795d3c9) Rest of the UI crystal clear 👍 ![Screenshot du 2024-04-09 à 08 07 00](https://github.com/wukko/cobalt/assets/541722/b3eca82a-1f8d-4b2a-9c24-3a305b3f499e) > frontend will be (eventually) rewritten in svelte, so yeah, not really Well feel free to close the issue, honestly.
GiteaMirror commented 2025-11-09 09:43:11 -06:00
Author
Owner
Copy Link
Copy Source

@wukko commented on GitHub (Apr 9, 2024):

feel free to close the issue

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

@wukko commented on GitHub (Apr 9, 2024): > feel free to close the issue i'll keep it around just in case the issue sticks
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
3rd party app support
bug
can reproduce
can't reproduce
documentation
duplicate
feature request
help wanted
instance hosting help
invalid
main instance issue
need more info
needs fixing
next major
not an issue
pull-request
Mirrored from GitHub Pull Request
 question
region lock issue
security
service request
skill issue
web ui
No labels bug next major
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cobalt#202