CODEWITHSUNDEEP
cssmobile-safarisvg-filters
Jezen Thomas
Jezen Thomas

Reputation: 13800

Mobile Safari grayscale filter adds blur

I'm desaturating images with these filters:

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(1);
}

It works nicely, though the filter seems to pixellate images on Mobile Safari. I don't know why that is. Is there a secret method of retaining clarity? Or must I live with this browser shortcoming? As an example, here are some juxtaposed screenshots, taken from iOS Simulator:

With grayscale filter

Without filter

Upvotes: 9

Views: 2282

Answers (2)

Luccas
Luccas

Reputation: 4268

A little bit too late but this should do the trick:

-webkit-transform: translateZ(0);

source: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

Upvotes: 8

Michael Mullany
Michael Mullany

Reputation: 31750

I don't know whether mobile safari is picking up the filter style or the -webkit-filter.

I don't believe that -webkit filters allow you to specify filter resolution, so if you want to over-ride this default behavior, you have to add a filterRes=400 to the filter definition or the alternative is to go to inline svg and specify an explicit filterRes for your filter aka.

<svg>
   <defs>
     <filter id="greyscale" filterRes="1278">
        <feColorMatrix etc...>
     </filter>
   </defs>

Images...

</svg>

Upvotes: 0

Related Questions