[svg] Borders are blurred and moved when using non-pixel values eg. rem, em like Bootstrap

[aninde]

Description

Borders are blurred when using non-pixel values eg. rem, em
After adding bootstrap
and surrounding div with Handsontable table with this bootstrap <h3>test</h3> (1,75 rem) Handsontable starts to be blurry.

Demo

https://codesandbox.io/s/bootstrap-800-svg-je9wr

Your environment

• Handsontable version: 8.0.0-svg
• Browser Name and version: IE, Edge
• Operating System: Windows

[warpech]

Please provide more detailed steps to reproduce. I can't see <h3>test</h3> in https://codesandbox.io/s/bootstrap-800-svg-je9wr. Is this the correct link? I tried this link but the borders are not blurry. Tested in Chrome and Firefox (Mac, non-Retina).

[AMBudnik]

Here's @aninde demo on Edge @warpech

The bottom border seems to be fine, but the left and right are blurry.

the same on Chrome looks well

also looks well in Firefox

[aninde]

Unfortunately, I can't reproduce this on Codesandbox. @budnix is able to replicate a blur locally with this code in React https://codesandbox.io/s/800beta-svg-blur-opolh.
Here is demo with Vanilla ver. https://codesandbox.io/s/funny-kepler-jcul7

[warpech]

The problem is related to blurry rendering of SVG when it is preceded by another element that does not have dimensions expressed in pixels.

I can simulate the same problem with a simple SVG object and:

• a native button: https://jsfiddle.net/7btjcy18/
• a font sized with REM units: https://jsfiddle.net/ptzs71ba/

The problem is reproducible in IE and Edge (EdgeHTML).

I don't know what to do :( I will seek help on Stack Overflow: https://stackoverflow.com/questions/60300141/blurry-path-edges-in-ie-edge-when-svg-is-preceded-by-an-element-not-sized-in-p

Screenshots

The below screenshots illustrate the problem using the JSFiddles linked above. The left part of the screenshot is Chrome, the right part is Edge (EdgeHTML).

[warpech]

After investigation, I have to admit that the problem is not fixable in IE. This is a similar problem to 125%, 150%, 175% DPI. Whenever sub-pixel values come to play, there is very high chance that they will be rendered blurry in IE/Edge.

[krzysztofspilka]

This is an issue reported for the SVG borders project, which was rejected and won't be implemented in Handsontable.