1908261 - Google Doc emojis are blurry on Windows

Status: RESOLVED FIXED

(Core :: Graphics: Text, defect, P3)

Description

[Chris Peterson [:cpeterson]]

Attachment: screenshots.png

This bug is a regression from COLR bug 1875670. I bisected this regression to this autoland push:

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=2532b9422882765d1928d376e5550144037b6ae6&tochange=bfaba1a0d7abfd9436a25d6354ebe6ff9e653b5c

Steps to reproduce

1. Open a Google Doc containing emojis in Firefox 124+, such as https://docs.google.com/document/d/1_HAKtGqSXFht9yiQUb3hx_acIFZNSa3W0AP0o8KNzrQ/edit

Expected result

The emojis should be clear and high resolution like in Chrome and Safari.

Actual result

The emojis are blurry in Firefox 124+ on Windows. See the attached screenshot. Firefox on Windows is using a different emoji font than Chrome.

The emojis are clear in Firefox on macOS. I haven't tested on Linux.

Comment 1

[Chris Peterson [:cpeterson]]

I attached a screenshot of 96 point emojis, thinking their large size would make the blurriness easier to see, but the problem is actually easier to see when comparing smaller emojis. So I added a 12 point emoji to the test doc.

Comment 2

[Chris Peterson [:cpeterson]]

Attachment: small_emoji_screenshot.png

Comment 3

[Jonathan Kew [:jfkthame]]

Do you see a similar issue when the emoji are used in regular HTML content, or is this specific to Google Docs rendering (which I believe is canvas-based)?

Comment 4

[Chris Peterson [:cpeterson]]

(In reply to Jonathan Kew [:jfkthame] from comment #3)

Do you see a similar issue when the emoji are used in regular HTML content, or is this specific to Google Docs rendering (which I believe is canvas-based)?

I only see this problem in Google Docs and Sheets. Emojis look fine here in Bugzilla 🦊 and on other sites.

Comment 5

[Jonathan Kew [:jfkthame]]

Just to confirm, are your screenshots from a high-dpi display (e.g. with 200% scale factor in the Windows display settings)? On a low-dpi (100%) screen, do you see a similar issue, or is the rendering fairly similar before/after the landing of bug 1875670?

(I think this is somehow related to <canvas> scaling that GDocs is doing on higher-dpi displays, but don't entirely understand what's going on yet.)

Comment 6

[Chris Peterson [:cpeterson]]

(In reply to Jonathan Kew [:jfkthame] from comment #5)

are your screenshots from a high-dpi display (e.g. with 200% scale factor in the Windows display settings)?

Yes. My laptop's built-in screen has Windows display scale factor "250% (Recommended)" and an external monitor with scale factor "150% (Recommended)".

On a low-dpi (100%) screen, do you see a similar issue, or is the rendering fairly similar before/after the landing of bug 1875670?

Changing either screen's scale factor to 100% (and restarting Firefox) doesn't seem to make a difference. The rendering in Fx 130 is still blurry and different from Fx 123 (before bug 1875670).

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1875670

Comment 8

[Mike Conley (:mconley) (:⚙️)]

Hey jfkthame,

131 Engineering REO here. From a skim of this bug, it looks like we're still in the information-gathering stage for this bug... is there any other information you require from cpeterson to help diagnose what's going wrong?

Comment 9

[Jonathan Kew [:jfkthame]]

I suspect the issue here may be that the cached (bitmap) image we use to render the emoji isn't necessarily being aligned to the pixel grid of the destination; it's probably subject to the same sub-pixel positioning as normal text would be, but being a cached bitmap it doesn't handle that well (whereas outline glyphs would get rasterized differently depending on their subpixel alignment). But I haven't found time to dig in and figure out how best to address that.

Comment 10

[Jonathan Kew [:jfkthame]]

I've been experimenting a bit here, and I think there are a couple of things we can do that will help.

First, when we render the cached bitmap image for an emoji glyph, we should ensure that we round the target position to integer pixel coordinates, so that we avoid adding blurriness as a result of the source pixels being fractionally offset from destination pixels throughout the image. In theory this may give us less "correct" positioning of the emoji glyph, and less accurate spacing, but only at a fractional-pixel level, and (unlike with normal text glyphs within a word) fractional-pixel disturbance to the positioning of an emoji is unlikely to be noticeable or important.

Secondly, I propose to create the cached bitmaps of color emoji glyphs at 2x scaling, rather than just at the nominal size of the current font; this results in better final rendering especially in cases (such as Google Docs canvas on a high-res screen) where the text actually ends up rendered with a scaling transform.

I'll attach a screenshot showing the effect of these changes.

Comment 11

[Jonathan Kew [:jfkthame]]

Attachment: current Nightly (left) vs patched build (right), on screens with devicePixelRatio=1.5 (top) and 2.0 (bottom)

Comment 12

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1908261 - When caching a rendered image of a color-emoji glyph, use 2x scaling to get a higher-resolution rendering; and when painting the cached image, pixel-align the position to keep a sharper result. r=#gfx-reviewers

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b462e7b742d8
When caching a rendered image of a color-emoji glyph, use 2x scaling to get a higher-resolution rendering; and when painting the cached image, pixel-align the position to keep a sharper result. r=gfx-reviewers,lsalzman

Comment 14

[amarc]

Backed out for causing retest failures @ colrv1-05.html

• Backout link
• Push with failures
• Failure Log
• Failure line:

REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/font-face/colrv1-05.html == layout/reftests/font-face/colrv1-05-ref.html | image comparison, max difference: 65, number of differing pixels: 6105

————————————————————————————————————————————
Backed out for causing reftest failures @ color-1a.html

• Push with failures
• Failure Log
• Failure line:

REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/font-face/color-1a.html == layout/reftests/font-face/color-1-ref.html | image comparison, max difference: 128, number of differing pixels: 52

Comment 15

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/a950ed4804c0
Backed out changeset b462e7b742d8 for causing multiple reftest failures CLOSED TREE

Comment 16

[Jonathan Kew [:jfkthame]]

Ah, drat - I thought I'd caught all the fuzz-changes. Updated, trying again.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/063f6d0388e8
When caching a rendered image of a color-emoji glyph, use 2x scaling to get a higher-resolution rendering; and when painting the cached image, pixel-align the position to keep a sharper result. r=gfx-reviewers,lsalzman

Comment 18

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/063f6d0388e8