1824025 - Transformed non-1:1 SVG <pattern>s are very blurry

Status: VERIFIED FIXED

(Core :: SVG, defect)

Description

[Taylor Hunt]

Attachment: firefox-blurry-pattern-testcase.svg

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

Steps to reproduce:

Test-case uploaded to bug, also available on CodePen: https://codepen.io/tigt/pen/dyqZjXj/47d58b15e597b84fa95f7a6268ccfa47?editors=1000

1. Create an SVG <pattern> that has a non-square surface area -- usually a viewBox where its width and height differ.
2. Transform the pattern using patternTransform.
3. Attempt to tile the pattern on a shape.

The <pattern> attributes the test-case uses to achieve the above: viewBox='0 0 110 24' width='110' height='24' patternUnits="userSpaceOnUse" patternTransform="rotate(90)"

Actual results:

Firefox renders the pattern blurrier and blurrier as its aspect-ratio diverges from 1:1. Small width/height differences aren't as noticeable, but the rendering approaches "pathological" even with a ratio like 5:1.

This happens on Windows and MacOS on both 1x and 2x reported screen densities, so the issue probably doesn't involve OS APIs.

Expected results:

Chromium and WebKit render the pattern without blurriness. I couldn't find any information in the spec about how this might be a degenerate thing to do with a pattern, so maybe FF is optimizing something it shouldn't?

Comment 1

[Taylor Hunt]

Attachment: ff-windows-rendering.png

Comment 2

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

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Jonathan Kew [:jfkthame]]

Interestingly, if I change the rotation in the codepen example to rotate(45) or similar, the pattern renders quite well. But as the angle nears 90, it definitely gets very rough.

Comment 4

[Robert Longson [:longsonr]]

Attachment: firefox-blurry-pattern-testcase.svg

corrected testcase

Comment 5

[Jonathan Kew [:jfkthame]]

I believe this is happening because of the scaling in this block of code. I've pushed a try job with an experimental patch to improve it; let's see how it looks.

Comment 6

[Robert Longson [:longsonr]]

It's easier than that I think, ConvertToSurfaceSize should just take bbox.Size rather than transformedBBox.Size

Comment 7

[Jonathan Kew [:jfkthame]]

I was concerned that wouldn't work so well in cases where the patternTransform is going to substantially enlarge the rendering.

[edit: So for instance, simply using bbox.Size() makes the right-hand example in https://codepen.io/jfkthame/pen/PodXJLy look terrible.]

Comment 8

[Robert Longson [:longsonr]]

we could create such a case and try it I suppose. Here's my blue corner try job to take on your red corner one. I've temporarily removed the fuzziness of all pattern transform reftests to see if we've made progress on those.

Comment 9

[Robert Longson [:longsonr]]

We should do it your way given that testcase but include something like it in our reftests.

Comment 10

[Robert Longson [:longsonr]]

I can fix mine like so... try job

This version displays your testcase and the testcase in the bug without fuzziness

Comment 11

[Robert Longson [:longsonr]]

Attachment: Bug 1824025 - transformed patterns may be blurry r=jfkthame

Comment 12

[Robert Longson [:longsonr]]

I guess 17, 2375 beats 90,5414

Comment 13

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=7c264250ed868b222c4ef895c9935f02d9c02acf

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ec2615be4504
transformed patterns may be blurry r=jfkthame

Comment 15

[Iulian Moraru]

Backed out for causing reftest failures on pattern-transformed.

• Push with failures

• Failure log

• Backout link

Comment 16

[Iulian Moraru]

The patch was re-landed. Sorry for any inconvenience caused by this.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b2f691d7ddb1
transformed patterns may be blurry r=jfkthame a=reland

Comment 18

[Iulian Moraru]

I was right the first time, this indeed caused reftest failures on pattern-transformed.
Something strange happened with this backfills for this Rs2 job they all turned green and that was the thing that made me re-land the patch thinking I was wrong the first time.

• Push with failures

• Failure log

• Backout link

Comment 19

[Robert Longson [:longsonr]]

https://treeherder.mozilla.org/jobs?repo=try&revision=b4054b325ce81ed2f9af2c6cec6d97076125e063

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/443c27d79b65
transformed patterns may be blurry r=jfkthame

Comment 21

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/443c27d79b65

Comment 22

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-03-23 Nightly build on macOS 12.
Verified as fixed on Firefox 113.0(build ID: 20230501151611) and Nightly 114.0a1(build ID: 20230502160708) on macOS 12, Windows 10, Ubuntu 22.