I am making an attempt to put an SVG icon inline with some textual content. It presently works completely on all browsers that I’ve examined, aside from these on IOS.
The problem that I am having is that on IOS, generally, the shapes drawn within the SVG will shift to the left, in comparison with it is background. You may see this occur in this minimal instance:
Sm
<svg viewBox='0 0 2 2' top="1em" width="1em" model="background-color: black">
<rect class="icon-background" fill="pink" top="1" width="2" />
</svg>
The place on most browsers, the pink rectangle shall be appropriately aligned with the SVG’s background, however on IOS, it will likely be 1 pixel to the left.
You could discover the ‘Sm’ initially of the road, because it appears there must be some quantity of textual content to set off this bug (in the event you take away the ‘m’, it renders appropriately on all browsers).
I’m curious if that is supposed behaviour or not, since I could not discover any reference to this. If that is supposed behaviour/a recognized bug, is there a repair to make IOS browsers work correctly?
