eufemia icon indicating copy to clipboard operation
eufemia copied to clipboard

Safari render artifacts on `box-shadow` 1.5px borders

Open tujoworker opened this issue 1 year ago • 0 comments

🐛 Bug Report

We use box-shadow instead of borders in order to not change the actual dimension of components.


1x retina

But when they have 1.5px in diameter, they "can" create rendering artifacts. Especially when Safari is run in 1x retina screens.

Also, Firefox does have similar issues, while Chrome does not.


2x retina

In this case, the width's are like this:

  • 1px – do look like 1px
  • 1.3px to 1.7 has the same thickness and do look like 1.5px
  • 2px – do look like 2px

To Reproduce

Change the resolution to 1x retina.

Expected behavior

To render the same as in 2x retina.

Issue screenshot

Screenshot 2023-12-19 at 09 20 02

tujoworker avatar Dec 20 '23 14:12 tujoworker