Opened 8 years ago
Last modified 6 months ago
#41580 assigned enhancement
Review the usage of the `::-moz-focus-inner` CSS fix for the buttons extra padding in Firefox
| Reported by: |
|
Owned by: |
|
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Administration | Keywords: | has-screenshots good-first-bug has-patch dev-feedback |
| Focuses: | ui, css | Cc: |
Description
For a number of years, Firefox used to set some extra padding on the buttons (or inputs of type button/submit/reset). To address this, WordPress uses a known fix targeting the proprietary Firefox pseudo element ::-moz-focus-inner.
Seems something has changed recently and starting with Firefox 53, FF doesn't apply the extra padding any longer. I think the relevant Bugzilla ticket Firefox 53 release notes, though.
Testing a bit on Windows, in the screenshot below:
- on the left, Firefox 48: buttons without and with the CSS fix: there's a clear size difference
- on the right: Firefox 54: buttons without and with the CSS fix: no size difference
Codepen available here: https://codepen.io/afercia/full/Gvrzwz/
Seems these rules used across the admin stylesheets could be simplified a bit. The only part that needs to stay is border-width: 0; or, maybe better, border: 0; which is necessary on Windows to remove the dotted line on :focus:
This could be also a good opportunity for some clean-up. For example, seems to me in press-this.css there are two identical rules.
Attachments (2)
Change History (9)
#2
@
8 years ago
- Owner set to viktorfroberg
- Status changed from new to assigned
Assigning to mark the good-first-bug as "claimed".
@afercia Could you please review the patch? :-)
#3
@
8 years ago
- Keywords needs-refresh added
The patch should be refreshed as Press This is now a plugin and not part of core any longer. Also, files from external libraries such as jquery-ui-dialog.css shouldn't be modified.
#7
@
6 months ago
- Keywords dev-feedback added; needs-refresh removed
Hi all,
Just taking a look at this as it has been a while since this ticket was touched. I have tested the latest patch added and this works well without issue. As of such I don't believe that the patch needs a refresh and is ready as is. However I have added the dev-feedback tag to get additional feedback from others too.


Remove duplicate css rule in press-this.css, remove padding: 0, change border-style: none and border-width: 0 to border: 0 in all ::-moz-focus-inner rules.