Way back in the time machine of dreams I was reworking my blog in CodePen, until I ported my work to a local machine. During that time on CodePen I was playing with CSS Filters as I was writing about them for the CSS-Tricks Almanac. Of course like the good little developer I am I decided to try a grayscale filter on my SVG logo and the following are the results as I began my cross-device testing.
As you can see, the first image is retrieved using the
img tag and displayed as it would across my MacBook Air and the iOS Simulator Retina iPad at 100% scale. Both scenarios result in a beautifully crisp SVG logo. Bang a rang! #amirite?
Taking this same SVG and simply applying the grayscale CSS filter things dramatically shift for the worse and result in a blurry SVG logo on the iOS retina device depicted in the following screenshot:
No clue why this is occurring, but I think it is safe to say CSS Filters need to be tested across the board for everyone’s sanity in the early stages of development. I’ve also experienced this same scenario with the drop-shadow property as well. Again, no clue what is going on. I’m leaving that for smarter folks to figure out 😉
If you feel like giving it a go yourself here’s the demo to test with that can also be found on CodePen:
See the Pen Blurry SVG using CSS Grayscale Filter by Dennis Gaebel (@grayghostvisuals) on CodePen.1395
Here’s a temporary solution for this bug: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays
And here’s the stackoverflow comment linking to the bug reported to webkit.