Dashicons conflict with text-rendering: optimizeLegibility

[wpweaver]

There is a little known problem using Dashicons with Android 4.2 and 4.3, and perhaps the later versions.

If any plugin or theme includes this CSS rule:

text-rendering: optimizeLegibility;

then Dashicons (and other icon fonts like genericons) do not display at all on those Android devices.

Twenty Twelve has this, and it should be removed. There should be a comment about this problem in at least the core dashicons.css file.

This is not a well-known problem, and is obviously very embarrassing. It is next to impossible for any WP developer to test, but there are still a huge number of Android 4.2+ devices.

[DrewAPicture]

Has anybody been able to reproduce this problem on Android 4.2-4.4?

[helen]

This is noted in the Genericons readme (which is not Dashicons), so it seems this is a known problem, at least. I don't know about removing it from Twenty Twelve, but it seems to me that if we want to fix this we should account for it in the toolbar CSS or Dashicons CSS (or both).

[sabernhardt]

Since WordPress 5.2 (r44940), the dashicons class and dashicons:before have text-rendering: auto in dashicons.css.

Could this be closed as fixed?

[desrosj]

It's been 8 years since this ticket was originally noted, and this still appears to be the only report of this issue in WordPress Core after searching Trac and the Support Forums.

I did some digging, and it looks like text-rendering: auto was ​introduced into Dashicons here and then merged into Core in [44940] as noted above.

Since Android is currently on version 12.x and 4.x received its last security patch in October of 2017, I'm going to close this one out as it seems to have resolved itself or to have been an incredibly rare edge case. Though some plugins and themes use Dashicons on the front end, the typical use is within the admin dashboard where Twenty Twelve's styles are not loaded. If it were more of an issue in the wild, there should have been more reports.