Skip to content

Fix: Unnatural focus outline style in Firefox browser #71598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
yashjawale wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Fix: Unnatural focus outline style in Firefox browser #71598

yashjawale wants to merge 8 commits into from

Conversation

@yashjawale
Copy link
Contributor

@yashjawale yashjawale commented Sep 11, 2025 •
edited
Loading

What?

Closes #59487

This PR fixes the issue of blurry focus outlines in Firefox on 1x screens by adding integer pixel values for box-shadow spread-radius using media queries targeting 1x displays. The fix has been applied to all applicable components.

Why?

Firefox renders fractional pixel values in box-shadow spread-radius as blurry on 1x pixel density screens. This creates an unnatural appearance for focus outlines

How?

  • Adds @media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) to detect 1x screens
  • Converts decimal box-shadow spread-radius values (0.5px → 1px, 1.5px → 1px) for better rendering
  • Creates MEDIA_QUERY_1X utility in /packages/components/src/utils/breakpoints.js
  • Updates/packages/base-styles/_mixins.scss to include 1x fallbacks in the input-style__focus mixin
  • Adds configuration values (controlBoxShadowFocus1x, borderWidthFocus1x) for consistency

Included components:

  1. TextControl
  2. BlockDraggable
  3. Bordercontrol
  4. ColorPicker
  5. DimensionControl
  6. InputControl
  7. TextAreaControl
  8. ToggleGroupControl
  9. UnitControl
  10. PagePatterns
  11. Header

Testing Instructions

  1. Open storybook interface
  2. Navigate to updated component
  3. Focus on input
  4. Inspect value of box-shadow applied to input on focus on 1x & 2x screens

Screenshots or screencast

Screenshot 2025-09-11 at 5 38 03 PM

@yashjawale yashjawale marked this pull request as ready for review September 11, 2025 12:10
@github-actions
Copy link

github-actions bot commented Sep 11, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yashjawale <yashjawale@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems [Package] Components /packages/components CSS Styling Related to editor and front end styles, CSS-specific issues. labels Sep 11, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@ellatrix ellatrix Awaiting requested review from ellatrix ellatrix is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Browser Issues Issues or PRs that are related to browser specific problems CSS Styling Related to editor and front end styles, CSS-specific issues. [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Unnatural focus outline style in Firefox browser

2 participants

@yashjawale @t-hamano