I've searched for long time and I can't find a solution to my problem.
Im working on a music label website and the design have some icons in .svg and .jpg, the problem is that on Safari on mac, some images/icons are pixelated and don't show properly.
I already tried CSS properties like:
image-rendering: -webkit-optimize-contrast; // Safari 6, UC Browser 9.9
image-rendering: -webkit-crisp-edges; // Safari 7+
image-rendering: -moz-crisp-edges; // Firefox 3.6+
image-rendering: -o-crisp-edges; // Opera 12
image-rendering: crisp-edges; // Chrome 41+ and Opera 26+
[...]
shape-rendering: geometricPrecision;
Anything of these works, it make images rendering even worse on other navs.
So Im looking for a solution...
I already tried to paste the entire <svg> but it doesn't change anything..
<svg width="32" height="32" style="margin-right:5px;vertical-align:middle;padding-bottom:4px;" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 100"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="m 50,964.36218 c -20.98681,0 -38,17.01333 -38,38.00002 0,20.9867 17.01319,38 38,38 20.98681,0 38,-17.0133 38,-38 0,-20.98669 -17.01319,-38.00002 -38,-38.00002 z m -11,20 30,18.00002 -30,18 z" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"></path></g></svg>
After some search I understood that image-rendering: crisp-edges; mean that image will focus on speed instead of quality, so I changed to optimizeQuality but I can't test it since I don't have a mac. So Im also looking for someone who has a mac with safari to test my website optimization.
Thanks for help
