SVG rendering issues in older browsers

[vinicius-wm]

Hello,

We've been facing an issue with aliasing in SVG-based textures in a specific device. This device runs Chrome 39, and we noticed that the aliasing issues arise when we render to the 2d canvas context. Here is a picture of how it looks on the device:

After a few different tricks to improve the aliasing failed, we decided to try to work around the aliasing issue by avoiding to use a Canvas as an intermediary step to rendering SVGs.

We did it by using a custom texture, implementing a loader function that renders the image from a DOM image element instead of the canvas, like this:

   _getSourceLoader() {
        // We need to scope these to protect them from modifications while loading (which may be async).
        const w = this._w;
        const h = this._h;
        const src = this._src;

        return function(cb) {
            const img = new Image();
            img.width = w;
            img.height = h;
            img.onload = () => {
                cb(null, {source: img, w: w, h: h});
            };
            img.onerror = function (err) {
                console.log('texture src', { src });
                cb(err);
            };
            img.src = src;
        }
    }

This works pretty well to avoid the aliasing issue, but it creates another bug that is quite intriguing. If you use this custom texture we created to render multiple SVGs with the same dimension, those textures start overlapping each other when rendered. You can see the issue on the first line of icons in the following screenshot (second lines is how they should look like):

This seems to be a problem only until Chrome 46, after that it behaves normally.

I created a small repository with the code to reproduce the issue:

• https://github.com/vinicius-wm/lightning-custom-texture-bug

I was able to test it with a couple of older Chrome versions by creating a trial account at crossbrowsertesting.com. Unfortunately I'm only able to reproduce the aliasing issue in the device itself, but the texture overlapping issue can be reproduced in all Chrome versions up to 46.

My main questions are:

• Would you have any ideas of what could be trigging this bug?
• and are there other ways we could achieve the same result (render an SVG while avoiding the canvas draw step)?

I'm leaving out the question of whether there's a way to fix the aliasing from the client code since I believe it's probably a lower level issue (OS or their browser instance), but if you have any extra ideas of how we could work around it, I would also appreciate it.

Thanks in advance for any help,

Vini