Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#30021 closed defect (bug) (fixed)

Admin bar font appears thin in Firefox when themes turn on font-smoothing in body element

Reported by: cbaldelomar's profile cbaldelomar Owned by: helen's profile helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.0
Component: Toolbar Keywords: has-patch commit 4.2-early
Focuses: ui Cc:

Description

Font bug in admin bar when theme turns on font smoothing in Firefox

http://webplantmedia.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-10.30.32-AM.png

Looks good when in dashboard, or theme does not use font smoothing

http://webplantmedia.com/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-10.30.43-AM.png

Propose solution to declare proper font smoothing in CSS when declaring font in admin elements.

font: 400 13px/32px "Open Sans",sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;

Attachments (3)

admin-bar.css (22.8 KB) - added by cbaldelomar 9 years ago.
30021.patch (1.1 KB) - added by cbaldelomar 9 years ago.
30021-2.patch (512 bytes) - added by cbaldelomar 9 years ago.
Second version of patch

Download all attachments as: .zip

Change History (14)

@cbaldelomar
9 years ago

@cbaldelomar
9 years ago

#1 @cbaldelomar
9 years ago

  • Keywords has-patch added

@cbaldelomar
9 years ago

Second version of patch

#2 @cbaldelomar
9 years ago

  • Keywords 2nd-opinion added

#3 @SergeyBiryukov
9 years ago

  • Component changed from Formatting to Toolbar
  • Keywords commit 4.2-early added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to Future Release

#4 @SergeyBiryukov
9 years ago

Most of the #wpadminbar * styles are there for overriding theme styles, so the comment is probably redundant.

Last edited 9 years ago by SergeyBiryukov (previous) (diff)

#5 @iseulde
9 years ago

  • Milestone changed from Future Release to 4.2

has-patch 4.2-early so moving to 4.2.

#6 @DrewAPicture
9 years ago

  • Keywords 2nd-opinion added

Do we still want to get this in for 4.2? I tested it with font smoothing enabled in latest Firefox and didn't see a difference between before and after.

Latest patch still applies.

#7 follow-up: @cbaldelomar
9 years ago

I just tested this on the latest dev version of WordPress, 4.2-beta1-31767-src, running the latest version of Firefox, 36.0.1, and the problem still exists as I originally reported. If you are testing on a mac with Retina display, the font weight change might not be as obvious.

If you are trying to recreate the problem, make sure your theme has font smoothing turned on in the body element.

body {
  -moz-osx-font-smoothing: grayscale;
}

You should be able to toggle this css rule, and see the difference change in your admin bar text.

#8 in reply to: ↑ 7 @DrewAPicture
9 years ago

  • Keywords 2nd-opinion removed

Replying to cbaldelomar:

I just tested this on the latest dev version of WordPress, 4.2-beta1-31767-src, running the latest version of Firefox, 36.0.1, and the problem still exists as I originally reported. If you are testing on a mac with Retina display, the font weight change might not be as obvious.

If you are trying to recreate the problem, make sure your theme has font smoothing turned on in the body element.

body {
  -moz-osx-font-smoothing: grayscale;
}

You should be able to toggle this css rule, and see the difference change in your admin bar text.

Thank you for the steps to reproduce, I'll give it another shot. Not retina, btw.

#9 @DrewAPicture
9 years ago

Using the directions in comment:7, I managed to reproduce the issue, and 30021-2.patch fixed the problem for me in latest Firefox.

This ticket was mentioned in Slack in #core by drew. View the logs.


9 years ago

#11 @helen
9 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 31824:

Toolbar: Protect against Firefox font rendering interference by themes.

props cbaldelomar.
fixes #30021.

Note: See TracTickets for help on using tickets.