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

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 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.