Closed Bug 1210752 Opened 6 years ago Closed 5 years ago
the new toolbar icons are blurry
5.13 KB, image/png
2.66 KB, image/svg+xml
45.65 KB, image/png
23.20 KB, patch
|Details | Diff | Splinter Review|
5.97 KB, image/png
Tested on Windows 10, I haven't tested on other platforms. The new icons look really nice, but they have blurry edges.
Hmm, looks like the previous ones were sort of blurry too, but I guess I'm seeing this now because the old ones had a bit more straight lines (especially the inspector which now has rounded corners). Is there anything we can do? They look so sharp on a mac retina screen that it feels really odd when I switch over to windows on a normal density screen.
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #1) > Hmm, looks like the previous ones were sort of blurry too, but I guess I'm > seeing this now because the old ones had a bit more straight lines > (especially the inspector which now has rounded corners). > Is there anything we can do? > They look so sharp on a mac retina screen that it feels really odd when I > switch over to windows on a normal density screen. That is so weird—I'll dig around and see what I can learn about SVGs appearing blurry and how to fix it...
Stephen, it looks like you've worked with some other resolution bugs in the past -->> https://bugzilla.mozilla.org/show_bug.cgi?id=878288 Any chance you've run into what we're experiencing here?
Test SVG with some different Illustrator flags set; it's possible that the editor exports with an anti-aliasing flag that's creating the fuzziness (or it's possible that we need to pass a crisp-edges flag or something like that as outlined here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) I haven't cleaned up this file at all, sorry!
So, spent a bit of time with bgrins on this trying a few things: - Seems like shape-rendering has little-to-no effect. We went messed with some of the flags outlined here but none seemed to do much to improve the fuzziness below 20px: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering - Tried messing with some anti-aliasing flags in Illustrator before exporting. This didn't do anything. Bleh. I read through some stack exchange issues and found this, which seems to suggest it's more of an issue with curved lines in SVGs at small sizes: http://graphicdesign.stackexchange.com/questions/42438/svg-images-showing-up-blurry-in-safari-in-any-size-smaller-than-20-px (also relevant: http://opticalcortex.com/svg-rendering-in-browsers/) So, unless shorlander knows of some tricks, the answer to solving the fuzz might be to modify the icons themselves.
The icons don't appear to be pixel snapped, that is causing the blurriness.
Comment on attachment 8669014 [details] tool-icons-27.svg Clearing flag, looks like Comment 6 will do the trick
Much better with the patch applied, thanks!
Assignee: nobody → hholmes
Status: NEW → ASSIGNED
Attachment #8680250 - Flags: review?(pbrosset) → review+
The performance tool's icon is probably the one that remains the most blurry one, but I don't this comes from a lack of pixel-snapping, rather from the fact that it doesn't have any straight lines and is quite complex.
(In reply to Patrick Brosset [:pbrosset] [:pbro] from comment #11) > The performance tool's icon is probably the one that remains the most blurry > one, but I don't this comes from a lack of pixel-snapping, rather from the > fact that it doesn't have any straight lines and is quite complex. Agreed, might be worth revisiting eventually.
We'll need to request uplift for this for 44 since the merge happened early
Marking checkin-needed - icon swap, shouldn't need a try push
Comment on attachment 8680250 [details] [diff] [review] nonfuzzy-icons.patch Approval Request Comment [Feature/regressing bug #]: 1205046 [User impact if declined]: Devtools tab icons will be fuzzy [Describe test coverage new/current, TreeHerder]: N/A [Risks and why]: This is an image swap with some pixel snapping, no code changes [String/UUID change made/needed]: none
Attachment #8680250 - Flags: approval-mozilla-aurora?
Comment on attachment 8680250 [details] [diff] [review] nonfuzzy-icons.patch It's still early in the Aurora cycle and this change looks safe enough. Approved for uplift to Aurora44.
Attachment #8680250 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
I have reproduced this bug with Firefox Nightly 44.0a1(Build ID: 20151002030204) on windows 10 (64-bit) with the instructions from Comment 0. The bug is verified as fixed with Firefox Beta 44.0b9 (Build ID:20160114165817) . Mozilla/5.0 (Windows NT 10.0; WOW64; rv:44.0) Gecko/20100101 Firefox/44.0 The bug is verified as fixed with Firefox Developer edittion 45.0a2 (Build ID:20160115004002) . Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
QA Whiteboard: [testday-20160115]
I have reproduced this bug on Nightly 44.0a1(2015-10-02) on Ubuntu 14.04 LTS, 32-bit! This bug is verified on Latest Beta 45.0b7! Build ID: 20160218171844 User Agent: Mozilla/5.0 (X11; Linux i686; rv:45.0) Gecko/20100101 Firefox/45.0 As this bug is verified on Windows 10, 64-bit(comment 22), I am marking this as verified!
Status: RESOLVED → VERIFIED
QA Whiteboard: [testday-20160115] → [testday-20160115][testday-20160219]
You need to log in before you can comment on or make changes to this bug.