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

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