picocss/pico

Input shadows are offset incorrectly in Firefox

Open

#462 opened on Feb 19, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)CSS (16,580 stars) (500 forks)batch import
help wanted

Description

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

Contributor guide

Tech stack
css
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSbrowser dev tools
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Inspect the CSS styles for input elements in the pico framework. The issue is likely caused by a Firefox specific rendering quirk with box shadow and border radius. Investigate the box shadow property in the input's CSS, possibly in forms.css. Test in Firefox developer tools to see the computed shadow values and adjust the offset to match Chromium's rendering. Consider using a CSS reset or a Firefox specific override.