How to make a pattern “fixed” in Raphael.js / IE?

Question

I\'m creating a small tool to illustrate the benefits of polarizing lenses. Basically a user will drag the lenses (a Raphael.js path) over a dazzling scene (the CSS background o

Answer 1

It seems like a redraw bug in IE. One workaround is to reset the fill image by adding

path_f.attr({fill:'url(http://www.fotoshack.us/fotos/58480536599_97943820.jpg)'});

after the translation. See fiddle here. This works okay in IE9 except for being slightly sluggish, but maybe you can find a cheaper way of forcing redraws. Not tested in older IEs. Also, it causes flickering in Opera and Chrome, so you'll need to detect IE so you only reset the fill if running in IE.

---

Edit: A better alternative is to reset the size of the canvas:

group_a.translate( dx-this.ox, dy-this.oy );
rsr.setSize(720,540);

This doesn't cause flickering in other browsers, so no need for IE-detection.