10

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;?

Community
  • 1
  • 1
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
  • Tell me how this work on Safari: https://codepen.io/anon/pen/pwPWzP – Asons Jun 20 '17 at 21:26
  • I also deleted my answer temporary, as I want to know how the above worked in Safari. As I wrote in a comment, the _hover_ rule using `filter: none` is most likely not the issue, it is the `filter: gray` that causes this on Safari – Asons Jun 20 '17 at 21:50
  • @LGSon the codepen you posted, it is really slow on Safari, basically same to Example 1. – Dalin Huang Jun 21 '17 at 02:54
  • Okay, and how does this one work: https://codepen.io/anon/pen/Ogmagz – Asons Jun 21 '17 at 09:22
  • Btw, here is another post about a Safari filter issue: https://stackoverflow.com/questions/12685794/grayscale-image-with-css-on-safari-5-x – Asons Jun 21 '17 at 21:19
  • 1
    Unrelated but why do you have so many prefixes there? -moz-filter and -o-filter don't even exist, and -ms-filter is a different kind of filter that has no relation to the standard making -ms-filter: grayscale(0%) equally meaningless. – BoltClock Jul 13 '17 at 07:07
  • @BoltClock Thanks, you are right, updated. Just curious about how safari treat those css different thank chrome/firefox, hope someone might know why. – Dalin Huang Jul 13 '17 at 12:44

2 Answers2

5

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!

cosinepenguin
  • 1,545
  • 1
  • 12
  • 21
3

Use CSS property on element with blur

transform: translateZ(0)

to make CSS render on GPU

Nk54
  • 751
  • 7
  • 15
Viacheslav Borodulin
  • 259
  • 3
  • 5
  • 1
    I was really surprised when this made a massive difference to the speed of filters on an old iPhone 6. Just saved my life since I still have a lot of users on those. How did you know about that trick? Is it documented somewhere? – DaveW May 07 '22 at 20:47