Closed
Bug 956134
Opened 11 years ago
Closed 8 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)
Tracking
()
RESOLVED
DUPLICATE
of bug 1224207
People
(Reporter: espadrine, Assigned: u459114)
Details
Attachments
(2 files)
(helper SVG file)
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>
|
||
Comment 1•11 years ago
|
||
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
|
|
||
Comment 2•11 years ago
|
||
(I'm reproducing this in 64-bit Linux Nightly, BTW)
|
||
Comment 3•11 years ago
|
||
Note: this doesn’t just happen when zoomed, also when viewing it on a high-resolution ‘Retina’ display: http://i.imgur.com/v27WhVN.png
|
|
||
Comment 5•11 years ago
|
||
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)
|
|
||
Comment 6•11 years ago
|
||
|
|
||
Comment 7•11 years ago
|
||
This testcase shows background vs. <img>, with unfiltered and filtered text.
The filtered text in the css-background case is fuzzy when zoomed.
|
|
||
Comment 8•11 years ago
|
||
(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.)
|
|
||
Comment 9•11 years ago
|
||
The old test case URL doesn’t work anymore — here’s the updated link: http://rawgithub.com/badges/gh-badges/ccd6f1c7abc996e529366ca6b870c3a804271599/sheet.html
|
|
||
Comment 10•11 years ago
|
||
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.)
|
Assignee | |
Comment 11•8 years ago
|
||
The patches in bug 1224207 can fix this bug too
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•