Page MenuHomePhabricator

Some icons in Flow look blurry
Closed, ResolvedPublic


Some icons in Flow look blurry. That's because (at least in places where I looked) they are 21x21px, instead of 24x24px which is the original size of the images.

pasted_file (316×173 px, 10 KB)

In this screenshot, the 'stripeToC' icon (next to "Summarize") and the 'remove' icon (next to "Delete topic") suffer the most. They should be pixel-perfect and crisp.

Event Timeline

matmarex raised the priority of this task from to Needs Triage.
matmarex updated the task description. (Show Details)
matmarex subscribed.
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

21px happens because we have font-size: 14px; and the icons are 1.5em. We could make the icons 1.6em to render them at 24px if that helps. But these icons are SVGs, right? Or are you observing this problem with the PNG fallbacks?

They are SVGs, but they still have to be translated to "raster" pixel-based displays when they're displayed, and they're optimized for 24x24px.

Here's the 'remove' icon at 21px and at 24px side-by-side, to me it's obvious the second looks better:

2015_08_27_01_57_14_remove.svg_Opera.png (21×21 px, 322 B) 2015_08_27_01_56_30_remove.svg_Opera.png (24×24 px, 247 B)

This might be somehow related to T97631, but that bug generally results in icons being rendered at 26x26px instead, which also looks awful but different.

2015_08_27_02_04_04_remove.svg_Opera.png (26×26 px, 399 B)

Yeah, this might be related. T97631 is about OOUI expecting the font size to be 12.8px (because it sizes the icons at 1.875em and expects that to be 24px), and that does actually happen in Flow as well, with the pencil icon for the "Edit description" button for example (where the font size is actually 14px and so we get a 26.25px icon). In the case of this bug, mw-ui expects the font size to be 16px (because it sizes icons at 1.5em and expects that to be 24px), but the actual font size in that context is once again 14px and so we end up with 21px icons. To round it out, I've also found an icon (speechBubble) that's rendered at 24.14px (because the font size is 1.15 * 14 = 16.1px), another one that's 30.188px (that 16.1px font size again, but with an OOUI icon instead of an mw-ui icon) and an indicator that's 15.1px instead of 12px (also 16.1px font size).

So, it's a mess. Is this where we give up and size icons in pixels?

If this is not critical, and it probably isn't, then I think the solution is to fix T97631 and continue switching Flow from mw-ui to OOUI icons.

Catrope closed this task as a duplicate of T112196: Icons fuzzy due to font size.

Meant to close the other one

Change 425039 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/Flow@master] Fix icon sizes (21px->20px) for sharpness

Catrope claimed this task.
Catrope reassigned this task from Catrope to Esanders.

Change 425039 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Fix icon sizes (21px->20px) for sharpness