CSS filter is very slow on Safari with different order, can someone explain?

Question

Seems like the position/order of the filter: none; make a huge difference in Safari (speed). Could some one provide a solid explaination of what happening?

Check the following two example in Safari only

---

Example 1: (With filter: none; at the end of CSS rule it is very slow on Safari)

Example 1 (Slow on safari)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; /* IE 6-9 */
}

---

Example 2: (Move filter: none; above other browser specific filter make it much much faster)

Example 2 (Much faster)

section#pitches>div>div:hover {
  opacity: 0.6;
  filter: grayscale(0%);
  filter: none; /* IE 6-9 */
  -webkit-filter: grayscale(0%);
}

I searched online try to find an explanation but no luck?

I have my guesses but as far as I know CSS does not STOP checking other rules if seen like filter: none;?

Answer 1

Your main issue is the way you are implementing your filter: none; (or, the way you are removing the previously-set grayscale filter). You are right to say that:

as far as I know CSS does not STOP checking other rules if seen like filter: none;?

but that is precisely the issue! It seems setting the filter to none is a lot more resource-intensive than simply changing the grayscale back to 0%!

I found a quote in the book Pro CSS3 Animation by Dudley Storey that corroborates this hypothesis:

"Note that you cannot transition smoothly to a state of 'none' or no filter applied; the filter must be given a fresh value" (Storey, 113)

Therefore, in Example 1, Safari is reading the CSS and is essentially being left with the much more labor-intensive feat of removing all filters rather than setting only the grayscale filter to 0%. In Example 2, Safari sees the -webkit-filter: grayscale(0%); last, which means it is the CSS it executes (and has an easier time doing it).

While I think this answers the question, I hope more experienced people share their input. I'm not really satisfied myself, because I've been told that convention is to put "generic" CSS tags before your own (putting -webkit, -moz, before other CSS), and the only information I found on Apple Safari Documentation is a vague warning:

Filters are visual effects that can be applied to images and other HTML elements... These filters are resource-intensive. Use them sparingly and only when necessary. Be sure to test your content on a multitude of computers and devices to assert that rendering performance is not hampered, especially if animating. Source

The easiest (and most compliant with convention, it seems) is to simply remove filter:none; entirely, since it is redundant and frankly unnecessary if the only filter you are removing is grayscale.

I hope it helps, and that the answer is coherent. It's a little late for me so forgive me for any errors!