33

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: behavior in Firefox 11.0

IE9 screenshot: behavior in IE9

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/ )

Paolo Stefan
  • 10,112
  • 5
  • 45
  • 64
  • 6
    +1 for the way the question is explained. – Rajkamal Subramanian Mar 22 '12 at 09:29
  • 1
    remember that IE uses VML not SVG, you probably already know this but I thought worth mentioning incase it helps with investigation – Neil May 08 '12 at 16:17
  • I agree, very well written question. +1. Hope for great answer.. – Nash Worth Jun 12 '12 at 05:30
  • If all else fails, Dimitry Baronovsky (author of Raphael) will know the cause and potential resolution of this. I heard one of his talks regarding animation in IE -- and what wacky shims were required to render it correctly. This may be a similar situation. All the best. – Nash Worth Jun 12 '12 at 05:34
  • consider using a Raphael shape for the underlay background, instead of the `div` container's CSS background. you could possibly sidestep the problem. – Eliran Malka Jul 21 '12 at 11:16
  • A jsfiddle might help people solve this problem... – dsummersl Aug 26 '12 at 15:02
  • @dsummersl yep, hope it can help... You can find it here http://jsfiddle.net/q4rXm/2/ (I edited my question too) – Paolo Stefan Aug 28 '12 at 10:04

4 Answers4

5

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.

Supr
  • 18,572
  • 3
  • 31
  • 36
  • IE8 is so strange. For me, just stating the fill attr twice - not even after the transformation, literally just copying and pasting the line after itself - causes the effect desired here. – user56reinstatemonica8 Jul 22 '13 at 15:18
  • 1
    Also it's worth mentioning that **the `setSize()` method doesn't work in IE8**. Often people use Raphael for IE8 compatibility. Resetting the fill with `element.attr('fill', element.attr('fill') );` does work, however. – user56reinstatemonica8 Jul 23 '13 at 12:11
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.

kiranvj
  • 32,342
  • 7
  • 71
  • 76
0

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

Chris Jaynes
  • 2,868
  • 30
  • 29
  • Thanks, but unfortunately this did not change anything on IE9. In fact, the problem is not related to #playmask, but to the path_f Raphael path element. – Paolo Stefan May 21 '12 at 10:05
0

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.

chris
  • 412
  • 6
  • 13