SVG as image drawn differently after layout

• Component: SVG
• Status: RESOLVED CONFIGURATION CHANGED

[Philip Rogers]

Created attachment 157882 [details]
Testcase (1 of 2)

If we have an SVG file referenced as an image, the image will draw differently depending on if a layout has occurred:

        image.onload = function() {
            var context1 = canvas1.getContext('2d');
            context1.drawImage(img, 0, 0); // draws correctly

            setTimeout(function(){
                var context2 = canvas2.getContext('2d');
                context2.drawImage(img, 0, 0); // draws incorrectly, scaled 2x?
            }, 1);
        }

My guess is we're changing the size of the SVG during layout. This could be the source of a bug I've seen sporadically where SVG embedded in an image renders incorrectly on first load.

[Philip Rogers]

Created attachment 157883 [details]
Testcase (2 of 2)

[Philip Rogers]

Just updating to report what I've found so far. I think there is more than one bug hiding in here :(

I think one bug is that we use the device scale factor in calculating the bitmap size in SVGImageCache.cpp. It looks like implementations have steered towards doing that one level deeper (see http://code.google.com/p/chromium/issues/detail?id=127852). This isn't surprising since this code was written long ago.

A second bug is that on the first drawImage() call we have not done a layout of the SVG image, so it does not have size and scales set, and so we end up using drawImage directly. On the second drawImage() we have done a layout so we have cached data, but the cached data has zoom applied. The second drawImage therefore has zoom applied twice.

This second bug may get more complex because as a part of fixing our SVG sizing issues, it looks like a layout may be needed just to determine the aspect ratio of SVG content.

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.