SVG & CSS Grayscale Filter: Retina Bug

Posted : | Filed Under : CSS

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?

Figure 1 : Mac OS X v10.9.4 vs. iOS Simulator v7.1 Retina 64bit (w/out CSS grayscale filter)

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:

Figure 2 : Mac OS X v10.9.4 vs. iOS Simulator v7.1 Retina 64bit (w/CSS grayscale filter)

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

Other Related Articlesā€¦

  • Touch Events for iOS

    Since we geeky Web Designers have become wise to the mobile era, we might as well become familiar with the handling of touch events ā€“and…

  • Retina is misunderstood

    As you can tell from the title of this post we're gonna talk about retina and most importantly, that it's not called retina. Why you…

  • Where's Your Assets?

    Damn! I'm hard coding all the project imagery assets within my stylesheets. What if the url to those image assets change? This is where Compass…

GrayGhost

Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web. http://grayghostvisuals.com.
  1. ā§ Aaron shouted:
    2014/09/24 ā€¢ 8:26 am

    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.
    http://stackoverflow.com/questions/13347947/css-filter-on-retina-display-fuzzy-images

    Reply to my comment

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples 
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
ā€¦code example goes hereā€¦
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. ā§ John Doe shouted this comment preview:
    2014/09/12