home | privacy | about | sparebrain | invitations

SVG Bugs in WebKit browsers (Chrome and Safari)

Test cases to illustrate perceived bugs in SVG handling in Google Chrome (since at least v7 and up to at least v15.0.874), Safari and WebKit browsers.
In an SVG webapp, these require special handling for WebKit browsers (debounced routines to force redraws and recreate text spans) and make Chrome etc look both ugly and slow...

Simple Text String Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus.

Bug #1 - Artifacts on moving SVG elements

The first 4 buttons move the block of greek text around the SVG background area - note that when moving the block sometimes the exposed background is not redrawn so leaves artifacts of the old content. For this test case it seems to happen mostly on moving down but in other larger cases we see it happening in all directions.



Bug #2 - Ugly text rendering (kerning) on zoom

The second bug is that when a transform is applied to text elements, it seems the kerning details (gaps between individual characters) are simply scaled up or down according to the (pixel/sub-pixel) rounded values determined when the text was first rendered - this leads to very ugly results at times, and can only be fixed by resetting the text content of the spans which forces a re-calculation of the character spacing.

To see a particularly ugly case, use the botton to zoom out seven or eight times (or more), then use the recreate spans button to re-render the (illegibly small) text, and then reset zoom and you'll see the now legible text is badly laid out until you recreate spans again.

Some other browsers suffer slightly from this (Firefox 4,5 and 6) but nowhere near as badly - they'll typically have just one or two character gaps out by just one pixel.