cobalt icon indicating copy to clipboard operation
cobalt copied to clipboard

Published 20 hours ago • verified publisher icon imputnet

Safari macOS : Popup is blurred on non HiDPI Screen

Open Write opened this issue 1 year ago • 5 comments

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 avatar Feb 19 '24 10:02 Write