Fixing VML flicker problem while using Raphaël.js

My friend George was playing with the Raphaël Javascript Library for drawing vector graphics and came across a weird IE bug where the image would flicker as he dragged his mouse over it while clicking. He asked for thoughts on Twitter so I thought I would take a look at it.

Here is a back up of his code in case he changes his code and you want to reproduce it. (Remember, the bug is only reproducible in IE). Here is a video of it in action:

My first instinct was that IE was having trouble rendering the image and handling the mousemove events at the same time. I wondered if one of those was removed from the equation if it would still continue. I then rewrote George’s draw function so it didn’t depend on mouse input and animated a random path. All it was doing was drawing a path and the result was that there was no flickering. So, it had to be the mouse events that was causing the problem.

Sure enough, if I went the other way and completely removed the Raphaël drawing code, then when I clicked and dragged on the image it would still flicker. But at a very specific point! Only when the mouse crossed the boundary of a shape in the image.

So, the title of this post is pretty misleading. It turns out the bug has nothing to do with Raphaël and has everything to do with VML (IE’s vector graphics library). I was able to fix it by having my onmousemove function return false; at the end, effectively never letting the VML image know that I was clicking and dragging. You can see it in action here.