Closed Bug 956134 Opened 10 years ago Closed 7 years ago

Text in SVG included as CSS background url(…) is fuzzy / blurred / smudged when scaled / zoomed (when there's an SVG filter on the text)

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Version:
26 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1224207

People

(Reporter: espadrine, Assigned: u459114)

Details

Attachments

(2 files)

(helper SVG file)
345 bytes, image/svg+xml
Details
testcase 1
336 bytes, text/html
Details 
URL: <http://jsbin.com/ExULIPu/1/edit>

1. Open URL
2. Zoom (eg, with Ctrl-=)
3. Observe the image on the right, specifically, the blurry text.

The cause is that the SVG file is included in a CSS background.

Blink has the same issue: <https://code.google.com/p/chromium/issues/detail?id=331385>
Data URL to demonstrate the issue:

* With CSS background:
data:text/html,<body style="margin: 0"><p style="background: url(https://rawgithub.com/espadrine/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/img/cheez-whiz.svg); width: 74px; height: 19px;">

* With <img>:
data:text/html,<body style="margin: 0"><img src="https://rawgithub.com/espadrine/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/img/cheez-whiz.svg">

In the former (CSS background) case, the text is definitely fuzzy when zoomed. The rest of the graphic is crisp, though.
Summary: SVG included as CSS background url(…) is fuzzy / blurred / smudged when scaled / zoomed → Text in SVG included as CSS background url(…) is fuzzy / blurred / smudged when scaled / zoomed
(I'm reproducing this in 64-bit Linux Nightly, BTW)
Note: this doesn’t just happen when zoomed, also when viewing it on a high-resolution ‘Retina’ display: http://i.imgur.com/v27WhVN.png
Does this still happen if the filter is removed?
Flags: needinfo?(dholbert)
The problem goes away if the filter is removed. (Then, the text is fully-white, and remains crisp when zoomed. No pixellation.)

So it looks like the filter's effects are what get pixellated.
Flags: needinfo?(dholbert)
Summary: Text in SVG included as CSS background url(…) is fuzzy / blurred / smudged when scaled / zoomed → Text in SVG included as CSS background url(…) is fuzzy / blurred / smudged when scaled / zoomed (when there's an SVG filter on the text)
Attached file testcase 1 — 
This testcase shows background vs. <img>, with unfiltered and filtered text.

The filtered text in the css-background case is fuzzy when zoomed.
(In reply to Mathias Bynens from comment #3)
> Note: this doesn’t just happen when zoomed, also when viewing it on a
> high-resolution ‘Retina’ display: http://i.imgur.com/v27WhVN.png

(Thanks -- that makes sense. Firefox's Retina behavior is kind of like an always-on full-page-zoom, under the hood, I believe.)
The old test case URL doesn’t work anymore — here’s the updated link: http://rawgithub.com/badges/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/sheet.html
That URL doesn't actually show this bug (and it looks great in Nightly).

That URL has <img> elements -- per comment 0 (and per the attached testcase), this bug only manifests with CSS backgrounds.

(There's a *different* bug that I see with Comment 9's URL, in Firefox Release -- the white text has various colors smudged across it at different zoomlevels. That's a different bug, though, and it's been fixed in Nightly.)
The patches in bug 1224207 can fix this bug too
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → DUPLICATE
Assignee: nobody → cku
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: