6

I have a top layer with a transparent background image set and would like all pointer events to be ignored. So originally I had this set up with <div style="pointer-events"></div> which worked great, but then I find out that IE doesn't support this.

Further reading I find several places that says IE does support <svg> with pointer-events:none, but I can't get it to work (I've never used SVG tags before so I could be doing this all wrong).

Please see this very simplified fiddle of what I'm hoping to achieve. http://jsfiddle.net/AGVTM/

dev
  • 3,969
  • 3
  • 24
  • 36

2 Answers2

4

The root (top most) <svg> element will not support pointer-events: none. The reason behind this is that it's a possible security exploit, you could cover a Facebook Like button with an SVG and let clicks go through as in this example http://jsfiddle.net/rVxTn/

If the SVG element is not root then clicks should go through. This example should work on IE9 (untested)

http://jsfiddle.net/DLEsn/

However, this doesn't solve your problem, because you cant put HTML elements inside the SVG element.

I've encountered this problem multiple times before, I've had to work around it in different ways. I'd suggest you to open a new question with the actual problem (and possibly screenshots) to see how this can be worked around.

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • 2
    `pointer-events: none` on a root SVG element seem to work in IE10, but not in IE9. Is that correct? And there is no way to make it work in IE9? – Marco Jakob Jun 18 '13 at 17:02
  • 2
    But why does it work [here](http://www.useragentman.com/blog/2013/04/26/clicking-through-clipped-images-using-css-pointer-events-svg-paths-and-vml/) (click on TV in IE9)? – Marco Jakob Jun 18 '13 at 17:06
  • @MarcoJakob see my post on the root cause of ngDev's issue. In your TV example's case, the SVG overlay is not absolutely positioned, so it works properly in IE9. – Brian Jordan Jun 06 '14 at 23:40
  • 1
    @Duopixel is that accurate? See https://bug-45467-attachments.webkit.org/attachment.cgi?id=94332 — correct me if I'm wrong, but it looks like the blue rectangle is a top-most SVG element and supports `pointer-events: none` in IE9. – Brian Jordan Jun 06 '14 at 23:43
  • 1
    It seems that some old IE filters (e.g. `filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0)`, as having minimal visual impact) have a side effect of enabling `pointer-events:none` even for absolutely positioned root SVG elements. This example works for me in IE9: http://jsfiddle.net/58frLccc/2/ – Ilya Streltsyn Sep 29 '14 at 23:07
1

Root cause

Absolutely positioned SVGs will not propagate clicks through to HTML elements in IE9.

See this webkit test case discussion: REGRESSION(r66731): pointer-events are broken in some cases, and the corresponding minimal test case. Meaning, interestingly, this bug almost made it in to WebKit, too, but got fixed in time.

In IE 9's case, the results:

IE 9.0.8112.16421 = fails test 1: floating; passes test 2: inline

Workarounds

See this StackOverflow post on simulating pointer-events: none—How to make Internet Explorer emulate pointer-events:none?

They are discussing non-SVG front elements in particular, but the technique of forwarding clicks through to the underlying elements may apply in your case as well.

Community
  • 1
  • 1
Brian Jordan
  • 2,377
  • 3
  • 21
  • 29