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

For all those answers saying IE9 can only handle VML and not SVG. Not true. IE9 has native SVG support, to certain extent. OP have you tried doing this with a clipmask instead of dragging around a fill? My understanding is that changing the position of the clipmask path should correctly "reveal" the correct section of the picture. Hopefully shouldn't be too hard after this to add a static image for the background.

Answer 2

I've had a few similar problems with the VML elements created by Raphael in IE, especially when trying to float elements over the top of other elements, etc.

The VML elements seem to end up in weird places in the DOM sometimes, and with strange CSS values, such as "position: static", where you'd expect "position: absolute" or "position: fixed". I'd double-check those CSS values, and make sure that those elements are where you think they are in the DOM.

I've also had Raphael reset the position value of the container in IE to "position: static". In that case, I had to add a line to my stylesheet to force it back. In your case, you could try:

#playmask {
  position: absolute!important;
}

Weird things seem to happen to the flow around those VML elements...

Answer 3

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.

Answer 4

This is something related to the positioning of the elements.

Try giving absolute for #playmask and for its parent give position:relative

I remember something like this encountered sometime before when playing with Raphael. It happened only in IE, I thought it was a bug in Raphael, later found its due to positioning.