can someone explain why this works in IE browsers?

Question

I had a cropping plugin that allowed for panning of an image when you dragged on it. I wanted to apply a mask png over the top to give the impression of a cut shape. here is the jsfiddle

It uses the css3 property pointer-events:none; on the image mask div, and it works in webkit browsers like chrome and firefox. But it doesn't work in IE because pointer-events: none; only works on an SVG.

I did a lot of research in how to pass pointer events through divs. I tried some solutions, but they were a headache, and some didn't work:

so question

forward mouse events through layers

After looking more into the plugin I was using I was able to extend it and get it to work in an IE browser (tested 8 and 9 only) and other browsers, not utilizing the pointer-events option. Here is the jsfiddle of the new version. But I don't really know why it is working?? I basically did three things.

1. Pass the mask src in as an option

2. Add a check to see if a mask option is provided, if so load the function:

   if (this.options.mask_src) {
     var masksrc = this.options.mask_src;
     this.createMask(masksrc);
   }
   

3. Have the function append a div with mask image as the background image to the document div:

   createMask: function(m_src) {
   
       $('<div class="iviewer_image_mask" style="background: url('+ m_src +');"></div>').appendTo(this.container);
   },
   

Can anyone explain to me why this solution works for image panning that has a mask layer overtop? It's like it is only applying mouse events to the image, and ignoring the mask layer.

Answer 1

It appears to be due to the location of the two div elements. In your non-functioning version, this is the html structure (simplified):

<div class="wrapper">
    <div id="viewer2" class="viewer">
      <img />
    </div>
    <div class="image-mask"></div>
</div>

In your functioning version where you insert the element, this is what it ends up:

<div class="wrapper">   
    <div class="viewer iviewer_cursor" id="viewer2" >
      <img />
      <div class="iviewer_image_mask"></div>
    </div>
</div>

And by moving the mask into the viewer div in your original, I could get it to work in this fiddle.

I believe this makes a difference, since your script is binding to the viewer2 div, so having the mask inside that apparently allows it to be functioning within the context of your script, whereas having it outside does not.