I'm trying to place an SVG icon inline with some text. It currently works perfectly on all browsers that I've tested, apart from those on iOS.
The issue that I'm having is that on iOS, sometimes, the shapes drawn in the SVG will shift to the left, compared to its background. You can see this happen in this minimal example:
Sm
<svg viewBox='0 0 2 2' height='1em' width='1em' style='background-color: black'>
<rect fill='red' x='0' y='0' height='1' width='2' />
</svg>Where on most browsers, the red rectangle will be correctly aligned with the SVG's background, but on iOS, it will be 1 pixel to the left.
You may notice the 'Sm' at the start of the line, since it seems there needs to be some amount of text to trigger this bug (if you remove the 'm', it renders correctly on all browsers).
I am curious if this is intended behaviour or not, since I couldn't find any reference to this. If this is intended behaviour/a known bug, is there a fix to make iOS browsers work properly?