Why is Safari flipping my SVG background patterns?
I have a svg file similar to this
<?xml version="1.0" encoding="utf-8"?><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"x="0px"y="0px"><defs><patternid="pat"patternUnits="userSpaceOnUse"width="3px"height="3px"><recty="2"width="1"height="1"fill-opacity="0.2"/><rectx="1"y="1"width="1"height="1"fill-opacity="0.2"/><rectx="2"width="1"height="1"fill-opacity="0.2"/></pattern></defs><rectfill="url(#pat)"height="148"width="259"y="106"x="109"stroke="#000000"/></svg>In Chrome and Firefox, this looks as expected:
Now in Safari (5.1.3) I see the following:
Note that here the lines are reversed. This is because it seems that the safari vertically flips any template that I define to fill.
Am I missing something? This is mistake?
+4
1answer
This is mistake. See:https://bugs.webkit.org/show_bug.cgi?id=75741
On Safari (Mac), it needs to be fixed using version 5.1.5. On Mobile Safari, it does not seem to be fixed.
Try to clear the user agent * +<pattern patternTransform="scale(1,-1)" …>.
*) The detection function is always better than UA sniffing, but I have no idea how to detect this error.
+2