search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.82k stars 406 forks source link

Input shadows are offset incorrectly in Firefox #462

Open FWDekker opened 9 months ago

FWDekker commented 9 months ago

First of all, thank you for releasing v2! I had been looking forward to it for some time now, and it looks great :)

Issue Description

In Firefox, the box shadow of a focused input element is offset slightly incorrectly, resulting in a sort of "double vision" effect.

This issue occurs in Firefox, but not in Chromium. See the comparison below. I focused especially on the corners where the issue is most apparent. Both screenshots were made by going to pico's own Forms overview documentation page. Both screenshots were made in a fresh browser profile without add-ons.

Firefox 122.0.1 Chromium 121.0.6167.160
The input element's regular border and box shadow are offset slightly differently in the corners of the input element, resulting in a double vision effect. The input element's regular border and box shadow overlap exactly in all places.

Expected Behavior

I expect both browsers to behave as in Chromium.

Reproduction URL

https://picocss.com/docs/forms

Environment
OS Linux 6.6.13, Debian Testing, KDE, X
Browser See above
picocss 2.0.3
lucaslarroche commented 8 months ago

I agree. Not pretty. I don't see this problem with Firefox 122 on macOS. I don't have much idea how to fix it.

Brian-Pob commented 8 months ago

I was able to reproduce the bug Firefox on Linux (Arch Linux with GNOME 45) and Windows 11.

Tested on Chromium browsers as well with no problems.

Edit: I did a tiny bit of digging and it seems like this is a known bug with no fix or workaround as of yet. https://bugzilla.mozilla.org/show_bug.cgi?id=1662069

dark mode screenshot in windows of picocss bug Windows 11

light mode screenshot in linux of picocss bug Linux