Question

I’m working on a prototype system which will act as a proof of concept that an existing system can be made a lot more interactive.

It basically emulates our main software package but over the internet using JSONP requests to update a load of images and Raphael vectors to make it look like everything’s running.

I’m having trouble on Chrome however with Raphael not drawing vectors “off-screen”. What I mean by “off-screen” is that the main app runs through an iframe as it relies on cross-domain long poll comet through AJAX to get communicate back and forth. Below is an image demonstrating what I mean.

Here I’ve scrolled a long a little bit in the iframe to look at the bits “offscreen” and you can hopefully see that the grey arrows aren’t rendered. I’ve used Chrome’s developer tools to highlight over the SVN tag, showing that it’s only given 450px by 810px to the SVG tag, which is the same size allocated for the iframe.

It’s worth pointing out that it renders fine in Firefox. Any ideas?

Answer 1

I’ve had a similar problem and found a bug report for the WebKit project that seemed related:

https://bugs.webkit.org/show_bug.cgi?id=64823

According to the comments, it’s a bug in the rendering engine and there’s no workaround aside from losing the iframe or resorting to other means of scrolling the SVG viewport (like moving all the elements within the SVG element).

On the upside, version 16.0.912.21 has been released to the beta channel today and it seems that the bug has been fixed. I’ve also checked the latest chromium build (17.something) and the bug hasn’t resurfaced. I’m guessing the fix should find its way into the stable channel in a couple of weeks.