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 of the container DIV) and "see through" the lenses. Here is the js code:

var rsr = Raphael("playmask", 720,540);
// Lens path
var path_f = rsr.path("M0,73.293c0.024-39.605,17.289-53.697,35.302-61.34C53.315,4.312,99.052-0.012,119.011,0 c38.56,0.021,43.239,11.164,43.229,29.9c-0.002,3.45-0.76,28.632-16.349,58.949c-10.332,20.092-28.434,60.424-76.452,60.396 C29.821,149.223-0.022,112.898,0,73.293 M200.594,29.922c0.011-18.734,4.699-29.871,43.262-29.851 c19.96,0.013,65.691,4.39,83.695,12.052c18.005,7.662,35.254,21.772,35.231,61.379c-0.023,39.606-29.909,75.896-69.526,75.872 c-48.02-0.027-66.076-40.377-76.384-60.484C201.32,58.557,200.594,33.373,200.594,29.922");

path_f.attr({"stroke-width":2, fill:'url(img/polarized.jpg)'} );

var move = function(dx,dy){
    this.translate( dx-this.ox, dy-this.oy );
    this.ox = dx;
    this.oy = dy;
},
start = function(){
    this.ox = 0;
    this.oy = 0;
},
end = function(){   
};

path_f.drag(move,start,end);

The #playmask div has this CSS (just the "un-polarized" background image and the size):

#playmask{
    height:540px;
    width:720px;
    background: url(img/unpolarized.jpg);
}

What I'm stuck with is:

• Chrome/Firefox, as always, play nice: the lenses shape shows up, and the fill image looks "fixed" while dragging the lenses around (see the first pic);
• IE versions 7,8,9 work, but (surprise!) they don't behave the same way: the fill image is "glued" to the lens shape (see second attached pic).

What I'm asking here is: can I make IE9/8/7 behave in a similar manner, that is, keeping the fill image fixed while dragging the lenses? If so, how?

Firefox screenshot:

IE9 screenshot:

Edit Using Modernizr to detect browser features, I noticed that this strange behavior seems related to the "no-smil" feature of IE. I found out a bizarre behavior of IE9... the background does not "stick", but if I drag the mask around, select some text and press the right mousebutton, it refreshes the "polarized" background to the correct position!!

Edit 2 (21 May 2012) No solution yet :( but to be more precise, it does not relate in any way to the "no-smil" feature; and, the correct way to reproduce the bug on IE9 is drag the glass around, select some text in the rest of the page, and roll over the accelerator icon that pops up (the blue one with an arrow in it). The glasses bg magically "refreshes" at the correct position.

Important Edit 3 (28 August 2012)

You can find it all packed in this jsfiddle ( http://jsfiddle.net/q4rXm/17/ )

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

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.

Answer 3

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 4

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.