I discovered a bug in Blink (Chrome and Opera).[1] The workaround for this is to set the width and height of svg elements to round numbers (using Math.ceil seems to generally be a good way of doing this). I have implemented the workaround in my app and it works well. I’m debating on whether this is something that should go in framework code.
Reasons to add it: 1. It will make SVG components display correctly in all browsers. 2. Client developers do not need to be aware of this issue. Reasons not to: 1. It’s a bug which I believe will only present itself in cases where there is transforms applied to the elements. 2. It’s hopefully a temporary problem until it’s fixed in Blink. 3. It’s “just in case” code that’s only needed for Chrome and Opera and is only needed for certain types of svg hierarchies. 4. It’s relatively easy to work around in client code. 5. I’m pretty sure that elements which have a scale transformation will display incorrectly if the width and height values are rounded. To me, reason number 5 is a pretty compelling reason to NOT fix this in the framework. I do think we should document this bug with the workaround somewhere though. Thoughts? Harbs [1]https://bugs.chromium.org/p/chromium/issues/detail?id=757196
