9

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

Improve this question
3
  • It's not an answer but possibly a clue: the filter is clearly being applied to the non-retina versions of the images, probably for compatibility (eg, if it were a Gaussian blur then there'd be a difference in blur radius, and I guess there isn't sufficient logic in there to distinguish). Might be worth Googling around that line of thought — there's probably some proprietary property you can specify.
    – Tommy
    Commented Dec 13, 2012 at 19:04
  • Do you mean it's selecting a smaller source image for compatibility? These are inline images. The source for each image is the same in both screenshots. The images are originally around 300px either dimension, and are scaled down to fit the grid. The grid resizes to fit the viewport.
    – Jezen Thomas
    Commented Dec 13, 2012 at 19:19
  • I think that, inheriting some behaviour from older devices, Safari maintains the fiction that four of its actual pixels are 1px in CSS terms. So I'm speculating that when you apply a filter it defaults to applying that with each pixel of input being what it's pretended elsewhere is 1px, because some filters are based on that assumption. Hopefully there's a flag that can override that behaviour given that your filter obviously doesn't care how many real pixels are contained within 1px.
    – Tommy
    Commented Dec 13, 2012 at 19:35

2 Answers 2

Reset to default
8

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/

Improve this answer
0
0

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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.