Open Bug 1712702 Opened 4 months ago Updated 2 months ago

Large SVG icon are blurry

Categories

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

Firefox 88
defect

Tracking

()

People

(Reporter: robertas.uldukis, Unassigned)

References

(Depends on 1 open bug, Regression)

Details

Attachments

(4 files)

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

Steps to reproduce:

Add large svg to html img tag. Svg image attached
Example: <html><body><img src="largeDiagram.svg"/></body></html>

Actual results:

Image is very blurry. It seems that the larger image, the higher is blur.

Expected results:

Should render svg image as other browsers.

please attach largeDiagram.svg using the Attach New File button or I'm afraid we'd have to close this bug.

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

Component: Untriaged → SVG
Product: Firefox → Core
Attached image largeDiagram.svg

Seems perfectly legible to me. Where am I supposed to see it being blurry?

Attached image comparison.png

In this screenshots you can see differences how it's bad.

I did uploaded to our file sharing platform another svg file, is too big to upload here. With this file you have to see differences.
https://filetransfer.extranet.3ds.com/?email=robertas.uldukis@3ds.com using password 2qEDt7RGbm

I'm on a Mac and it's fine there. Perhaps you should experiment with choosing fonts that you find more legible. Maybe decrease the font strength/boldness.

If you will take closer, lines and shapes are blurry to. And can you download second file from the link you will be surprised how FF rendering very big svg files.

Not on a Mac they aren't.

(In reply to Robert Longson [:longsonr] from comment #9)

Not on a Mac they aren't.

what about windows machine?

(In reply to Robertas from comment #10)

(In reply to Robert Longson [:longsonr] from comment #9)

Not on a Mac they aren't.

what about windows machine?

We did try on 2 different Mac's machines and 3 Windows, and we all got the same result. See attachment screenshot from Mac.

That does not appear to be the same document, or maybe it is and you've zoomed into it. You've not listed zooming into the page as one of the steps that's required.

Svg should not lose quality even if you zoom in on it. I did attached current document from screenshot, but we can reproduce it and with others documents.

I did't say it should. But if zooming is a requirement to make the image blurry, you should say so so that we're all on the same page.

(In reply to Robertas from comment #14)

Svg should not lose quality even if you zoom in on it. I did attached current document from screenshot, but we can reproduce it and with others documents.

Actually that file is to boog to upload to bugzilla system. I added file to our file sharing platform. You can download it form https://filetransfer.extranet.3ds.com/?email=robertas.uldukis@3ds.com with password 2qEDt7RGbm and file name "largeDiagram3.svg".

I hope it will helps.

(In reply to Robert Longson [:longsonr] from comment #15)

I did't say it should. But if zooming is a requirement to make the image blurry, you should say so so that we're all on the same page.

Thanks for fast answers. No image should stay clear and sharp as in other browsers.

I just tried to see the largeDiagram3.svg on my linux box, it's not blurry at all with/without WebRender. There may be some special settings to reproduce this issue.

We did some research for you, try this http://kuckuc.lt/ url.
On Red Hat Enterprise Linux FF v78 and v89 svg is fine
On Windows 10 FFv78 svg is fine
On Windows 10 FFv89 and FFv88 svg is blurry
On MacOS Catalina 10.15.7 FFv89 svg is blurry

Can you double check and let us know if you will get the same results.

Thanks.

OK so you have a regression on windows at least in which case you can find a regression range via https://mozilla.github.io/mozregression/

Flags: needinfo?(robertas.uldukis)

So, can you reproduce on Windows FFv89 svg issue?

Attached image FFmozregression.png

Here is result from mozregression.

Flags: needinfo?(robertas.uldukis)

Thanks for finding out the regression range. Can you please post the pushlog_url link here? Thanks!

Flags: needinfo?(robertas.uldukis)

could be bug 1616676 given this is on Windows. Go to about:config and set gfx.webrender.compositor to false to test whether it's that.

Can you clarify your answer please?

And the main question is the same, can you preproduce the issue?

I can confirm this; the example at http://kuckuc.lt/ renders extremely blurry. This is a webrender issue; setting gfx.webrender.force-disabled:true fixes it and gives me crisp rendering (tried on both macOS and Windows). Just setting gfx.webrender.compositor:false does not help.

Bug 1543584 looks very relevant to what we're seeing here. I tried adjusting the image.cache.max-rasterized-svg-threshold-kb setting, and can confirm this does affect the result, but when I tried making it substantially larger (to see if I could get sharper rendering, at the cost of lots of RAM), rendering starts to fail altogether, so some other limit is presumably being exceeded.

Blocks: 1543584
Status: UNCONFIRMED → NEW
Ever confirmed: true

Just for completeness, I checked on Linux and (as expected) the issue is the same: http://kuckuc.lt/ renders extremely blurry with webrender, and perfectly sharp when WR is disabled.

Component: SVG → Graphics: WebRender
Blocks: gfx-triage
No longer blocks: 1543584
Severity: -- → S2
Flags: needinfo?(aosmond)
Priority: -- → P3
Regressed by: 1543584
No longer blocks: gfx-triage
Depends on: deferrable-blobs
Flags: needinfo?(aosmond)
You need to log in before you can comment on or make changes to this bug.