title: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?
body: <p>I recently came across an odd behaviour in Webkit browsers (under OSX at least) which took far longer to resolve than I would like!</p>
  
  <p>Essentially: setting <code>filter: blur(0)</code> (or the vendor-specific <code>-webkit-filter</code>) on an element should mean that no form of blur is applied to the element.</p>
  
  <p>However Webkit still blurs the element when either <code>blur(0)</code> or zeroing with a unit specified (ie: <code>blur(0px)</code>) is assigned to it.</p>
  
  <p>I've knocked together a quick Fiddle here to demonstrate: <a href="http://jsfiddle.net/f9rBE/" rel="nofollow noreferrer">http://jsfiddle.net/f9rBE/</a></p>
  
  <p>This shows three identical divs containing text (no custom fonts):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="no-blur"&gt;
      &lt;p&gt;&lt;strong&gt;This has absolutely nothing assigned&lt;/strong&gt;&lt;/p&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis orci in quam venenatis, in tempus ipsum sagittis. Suspendisse potenti. Donec ullamcorper lacus vel odio accumsan, vel aliquam libero tempor. Praesent nec libero venenatis, ultrices arcu non, luctus quam. Morbi scelerisque sit amet turpis sit amet tincidunt. Praesent semper erat non purus pretium consequat. Aenean et iaculis turpis. Curabitur diam tellus, consectetur non massa et, commodo venenatis metus.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>One has no style at all assigned to it whilst the other two have <code>blur(0)</code> and <code>blur(0px)</code>:</p>
  
  <pre class="lang-css prettyprint-override"><code>.no-blur{}
  .zero-px-blur{
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
  }
  
  .zero-blur{
      -webkit-filter: blur(0);
      -moz-filter: blur(0);
      -o-filter: blur(0);
      -ms-filter: blur(0);
      filter: blur(0);
  }
  </code></pre>
  
  <p>If you take a look in Safari or Chrome, the bottom two are blurred:</p>
  
  <p><img src="https://i.stack.imgur.com/Yh58U.png" alt="enter image description here"></p>
  
  <p>A few things worth noting:</p>
  
  <ul>
  <li>This unintentional blurring also occurs in Safari on iOS7 devices (both iPhones and iPads);</li>
  <li>It also occurs on Chrome and Safari under OSX;</li>
  <li>It doesn't appear to occur under Chrome and Safari on non-retina Apple hardware;</li>
  <li>It doesn't happen under FireFox in OSX.</li>
  </ul>
  
  <p>Of course, <code>filter: blur</code> isn't supported at all in Firefox just yet so it's hard to tell whether the behaviour I'm seeing is intentional/expected behaviour, or whether this is a bug in Webkit?</p>
  
  <p>I eventually came to the conclusion that using <code>blur(none)</code> instead had the desired effect (ie: removed all blur effects), but I'm confused as to why using zero doesn't have the same effect given that in other filter examples (eg: <code>filter: grayscale</code>) can be reset simply using zero rather than the none keyword.</p>
  
  <p>Why is this?</p>