Closed
Bug 1511997
Opened 7 years ago
Closed 7 months ago
CSS filter: drop-shadow() on an SVG <use> causes image to become blurry
Categories
(Core :: SVG, defect, P3)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: noyearzero, Unassigned)
Details
Attachments
(2 files)
Left FF, right Chrome
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Steps to reproduce:
<!DOCTYPE html>
<html>
<body>
<h1>Toggle filter: drop-shadow</h1>
<style>
body {
background: #444;
}
.svgicon {
display: inline-block;
line-height: 0;
transform: scale(1.66);
}
.svgicon svg {
height: 1em;
width: 1em;
fill: currentColor;
vertical-align: middle;
}
.svgicon svg {
filter: drop-shadow(-1px 1px 2px black);
fill: white;
}
</style>
<span style="font-size: 13px; ">
<span class="svgicon"><svg viewBox="0 0 32 32"><use href="#glyphicons-basic" /></svg></span>
</span>
<svg id="glyphicons-basic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path id="map-marker" d="M16,4a8.9999,8.9999,0,0,0-9,9c0,6,6.7583,13.07764,8.16156,14.63135a1.13778,1.13778,0,0,0,1.67688,0C18.2417,26.07764,25,19,25,13A8.9999,8.9999,0,0,0,16,4Zm0,14a5,5,0,1,1,5-5A5.00013,5.00013,0,0,1,16,18Z"/>
</svg>
</body>
</html>
Actual results:
SVG is blurry
Expected results:
SVG should remain sharp
|
||
Updated•7 years ago
|
Component: Untriaged → Theme
|
||
Updated•7 years ago
|
Component: Theme → SVG
Product: Firefox → Core
|
||
Updated•7 years ago
|
Priority: -- → P3
|
||
Comment 1•6 years ago
|
||
|
|
||
Updated•6 years ago
|
Attachment #9062331 -
Attachment mime type: text/plain → text/html
I am able to trigger this bug with not only drop-shadow(), but any of the filter functions: brightness(1) blur(0) contrast(1) grayscale(0) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) and sepia(0).
|
||
Comment 3•4 years ago
|
||
The issue doesn't affect only svg. Actually, applying drop-shadow() filter blurs text. I haven't noticed such behavior with other filters.
|
||
Updated•3 years ago
|
Severity: normal → S3
|
|
||
Comment 4•7 months ago
|
||
Doesn't seem blurry any more. I don't know what changed though. If there's still an issue we can reopen this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 7 months ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•