Ie 11 Pointer Events Override

css 'pointer-events' property alternative for IE

Pointer-events is a Mozilla hack and where it has been implemented in Webkit browsers, you can't expect to see it in IE browsers for another million years.

There is however a solution I found:

Forwarding Mouse Events Through Layers

This uses a plugin that uses some not well known/understood properties of Javascript to take the mouse event and send it to another element.

There is also another Javascript solution here.

Update for October 2013: apparently it's coming to IE in v11. Source. Thanks Tim.

SVG inside link not clickable in IE11 when pointer-events set to None

The problem is not the SVG itself or the pointer-events. The problem is the a tag, and how IE 11 renders the tag when it contain block elements inside.

The solution i tested is to style the a tag to fill its container:

a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
}

I encountered this problem before, with SVG's as images, in older versions of Internet Explorer.

Hope it helps!

.window{  position: absolute;  width: 150px;  height: 100px;  background-color: #424242}svg{  pointer-events: none;}
.b{  height: 40px;  width: 40px;  position: absolute;  bottom: 8px;  right: 8px;}
a {    overflow: hidden;    display: block;    width: 100%;    height: 100%;}

<div class="window">  <div class="b">    <a href="https://www.google.com" target="_blank">      <svg height='100%' width='100%'>        <rect width='100%' height='100%' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)'></rect>      </svg>    </a>  </div></div>

IE EDGE pointer-events: none not working on span tag

It appears to be a confirmed issue with EDGE:

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8295099/

To solve the issue in the meantime a block level element like a div can be used instead of span, or applying display: inline-block;, or some other block level display, to an inline element.

Pointer-events fail when used on parent element :hover in IE11

I'm guessing is because IE does not support value:initial

you can always try a javascript fix for IE:

$(document).ready(function(){
    $(document).on('mousedown', '.your-class', function (e) {
        $(this).hide();
        var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
        $(this).show();
        $(BottomElement).mousedown(); //Manually fire the event for desired underlying element
        return false;
    });
});

---

Related Topics