Fractional offset of inline SVG box shifts pixel grid

[subzey]

Affects: IE 9 to Edge (ex-Spartan), Firefox

While the top-left corner of <svg> bounding box coordinates are rounded, the svg contents are rendered as if there was no rounding.

Demo: https://jsfiddle.net/subzey/8a3wa5nv/1/embedded/result/
Notice how grid becomes blurry when offset is fractional. At the same time the border is rendered sharply all the time.

It's relatively easy to avoid fractional absolute coordinates when setting via JS. But the fractional part may appear if anything in the document flow before the svg element had fractional size, for example, inline-block with text.

Maybe the described behavior is spec compliant, but it's hard to reach pixel-perfect rendering.

[tshinnic]

Only some browsers happen to position SVG boxes on pixel boundaries, that is true. What I have done is:

• surround every <svg> with a <div>
• check if <svg> left/top is a fractional pixel value
• insert <div> padding or <svg> margin to move to unit values
• monitor resize events to redo the padding/margins as needed

That means that if you happen to be on a browser that automatically aligns SVG boxes on pixel boundaries the code does nothing (yay)

Of course that means the <div> must be sized at least one px larger than the <svg> size to allow for the <svg> to shift around to unit pixel values.

Inside the <svg> it's SVG's world. Outside the <svg> it's the DOM world. At the boundary between them you hear Rod Serling's voice intoning the "you are in the Twilight Zone"!

[subzey]

@tshinnic I did something similar to solve this issue, but instead of wrapping in <div> I insert and empty inline-block span earlier in the layout flow and set its margin-right to value in range -0.5 to +0.5 px.