title: CSS filter is very slow on Safari with different order, can someone explain?
body: <p>Seems like the position/order of the <code>filter: none;</code> make a huge difference in Safari (speed). Could some one provide a solid explaination of what happening?</p>
  <p><strong>Check the following two example in Safari only</strong></p>
  <hr />
  <p><em>Example 1: (With <code>filter: none;</code> at the end of CSS rule it is very slow on Safari)</em></p>
  <h3><a href="https://jsfiddle.net/dalinhuang/dcnqasdv/" rel="nofollow noreferrer">Example 1 (Slow on safari)</a></h3>
  <pre><code>section#pitches&gt;div&gt;div:hover {
    opacity: 0.6;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; /* IE 6-9 */
  }
  </code></pre>
  <hr />
  <p><em>Example 2: (Move <code>filter: none;</code> above other browser specific filter make it much much faster)</em></p>
  <h3><a href="https://jsfiddle.net/dalinhuang/L7a1mj6t/" rel="nofollow noreferrer">Example 2 (Much faster)</a></h3>
  <pre><code>section#pitches&gt;div&gt;div:hover {
    opacity: 0.6;
    filter: grayscale(0%);
    filter: none; /* IE 6-9 */
    -webkit-filter: grayscale(0%);
  }
  </code></pre>
  <p>I searched online try to find an explanation but no luck?</p>
  <p>I have my guesses but as far as I know CSS does not STOP checking other rules if seen like <code>filter: none;</code>?</p>