1656763 - Rotated svg text is blurry with webrender

Status: RESOLVED WORKSFORME

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

Description

[sergiy.goncharuk]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0

Steps to reproduce:

Tested with Firefox Nightly 81.0a1 20200802093514

1. Go to https://v8.dev/blog/v8-release-80
2. Look at "tweets" under the article header

Actual results:

FF with wr:
Text is blurry. I tried to play with CSS text-rendering rules, but nothing changes. Also tried to flip pref gfx.webrender.quality.force-subpixel-aa-where-possible but also nothing changes.

FF with d3d11 advanced layers:
Text is crisp and use subpixel AA.

Chrome:
Text is crisp and use subpixel AA.

Expected results:

FF with wr:
Text is crisp and use subpixel AA. Just like Chrome and FF with d3d11 advanced layers.

Comment 1

[sergiy.goncharuk]

Attachment: ff with wr.png

Comment 2

[sergiy.goncharuk]

Attachment: ff with d3d11 advanced layers.png

Comment 3

[sergiy.goncharuk]

Attachment: chrome 84.png

Comment 4

[sergiy.goncharuk]

Attachment: wr-capture.2.zip

Comment 5

[sergiy.goncharuk]

Attachment: about:support

Comment 6

[Dzmitry Malyshau [:kvark]]

Glenn, just pinging you in case you know right off the bat if this is expected. IIRC, we end up disabling the subpixel AA if we are rasterizing the task locally, which can be triggered by the transform. Still worth looking if this particular case requires it - maybe we can rasterize in screen space instead?

Comment 7

[Glenn Watson [:gw]]

If this is SVG text (which the bug mentions, and does appear to be from a quick look at the devtools inspector), then I suspect this is being drawn by the blob rasterizer, rather than WR itself.

If it is being drawn by WR, it might be that the scale factors are wrong, rather than a case of subpixel not being present. In general we should only create a local task if the transform contains perspective, which doesn't seem to be the case here.

Lee, Nical, would text inside an SVG element always end up being drawn by the blob rasterizer?

Comment 8

[Lee Salzman [:lsalzman]]

(In reply to Glenn Watson [:gw] from comment #7)

If this is SVG text (which the bug mentions, and does appear to be from a quick look at the devtools inspector), then I suspect this is being drawn by the blob rasterizer, rather than WR itself.

If it is being drawn by WR, it might be that the scale factors are wrong, rather than a case of subpixel not being present. In general we should only create a local task if the transform contains perspective, which doesn't seem to be the case here.

Lee, Nical, would text inside an SVG element always end up being drawn by the blob rasterizer?

If you just go and highlight the text then do "inspect element", it will take you into the middle of an SVG in the page source. So it definitely seems like this is all punting to the blob rasterizer.

Comment 9

[Glenn Watson [:gw]]

I don't know the blob rasterization code at all. Normally I'd hand this to Nical or JeffM, but they are both on PTO. Kris, any ideas who else might know the blob rasterization system?

Comment 10

[Timothy Nikkel (:tnikkel)]

Regression range
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e27a62f854b29efd5719040bb53227b65c3e954a&tochange=a86dcd6715c9e52fdd8e4a937b5e94ea2b9a5fcb

Comment 11

[Timothy Nikkel (:tnikkel)]

Attachment: mostly reduced testcase

Comment 12

[Kris Taeleman (:ktaeleman)]

@nical: Could you take a look at this when you get some time?

Comment 13

[Nicolas Silva [:nical]]

I think that the blurriness comes from the text being rasterized into a blob which is then rotated. I see two ways forward:

• Push further towards moving things out of blob images (for example here I believe we should be able to emit proper WebRender text runs instead of making them part of the blobs), so that WR can do it's magic and render more content in the right space. We'll also get better performance out of it.
• Change the blob layerization algorithm so that it puts the transform inside the blob in this case (non-animated transform) instead of outside. I don't know this code well so I'm not sure what constraints come into play but it will to generally crisper rendering for rotated static content.

... or do both because the combination will help a wider range of variations of this issue.

Comment 14

[Nicolas Silva [:nical]]

I did a bit more digging and what is happening here is that in the blob layerization code that deals with grouping, we break groups before a container if any of its children might be active. Since we can render images efficiently with regular wr display items we consider the image of the avatar as active. This creates a separate blob for each transformed tweet at the top of the v8 blog post, and causes us to apply the transform in WebRender instead of inside of the blob.

One thing we could do that would help this particular case, is to not make small images active inside a blob (or only make small images active if they would not break a group).
The code that decides whether an image inside and svg should be active is in SVGImageFrame::CreateWebRenderCommands when aDryRun is true.

Comment 15

[Robert Longson [:longsonr]]

The code path in bug 1555356 has been preffed off in by bug 1684625. That will fix this regression temporarily till the pref gets switched on.

Comment 16

[Mayank Bansal]

Cant repro this anymore with active SVG images re-enabled. Should this be closed now?

Comment 17

[Nicolas Silva [:nical]]

Let's close.