SVG & CSS Grayscale Filter: Retina Bug

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


Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web.
  1. ❧ Aaron shouted:
    2014/09/24 • 8:26 am

    Here’s a temporary solution for this bug:

    And here’s the stackoverflow comment linking to the bug reported to webkit.

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…

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: