Moving and changing SVG text causes Internet Explorer 11 to ignore the mouse

Question

http://jsfiddle.net/zzbar210/3/

I am testing this with IE 11.0.9600.17280. If I change the text box while moving the mouse around over the SVG area Internet Explorer stops responding to mouse events (clicking, movement) for the entire page, but I can still use the keyboard (typing, tabbing around). The only way I've found to get mouse control back is to refresh the page. Sometimes it will happen even if the mouse is not moving.

What is causing this? Is there a way to work around the problem?

var pt;

$(document).ready(function(){

  pt = document.getElementById("layout_area").createSVGPoint();
  
  $("#layout_area").mousemove(function(event) {
    $("#position").html(event.clientX);
     
     // Convert x/y into SVG position
      pt.x = event.clientX;
      pt.y = event.clientY;
      var svg = $("#layout_area")[0]
      
      var matrix = pt.matrixTransform(svg.getScreenCTM().inverse());
      
      var pos_x = matrix.x
      var pos_y = matrix.y
      
      $("#position").append("<br />( " + pos_x.toFixed(3) + ", " + pos_y.toFixed(3) + " )");

      document.getElementById("text1_use").setAttribute("x",pos_x-200);
      document.getElementById("text1_use").setAttribute("y",pos_y-200);
  });
  
  $("#label_text").keyup(function() {
      document.getElementById("text1").textContent = $("#label_text").val().trim();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="label_text" />
<br />
<svg width="400" height="200" viewbox="0 0 400 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="layout_area" style="overflow: hidden;">
  <defs>
    <svg id="Si19krjw36" viewBox="-200 -200 400 400" width="400" height="400">
      <text id="text1" style="font-family: Arial; font-size: 25pt; text-anchor: middle;" fill="#000000" x="0" y="0">text</text>
    </svg>
  </defs>
  <rect x="0" y="0" width="400" height="200" fill="white" stroke="black"/>
  <use id="text1_use" x="-103" y="-84.09" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Si19krjw36" />
</svg>
<br /><br />
<div id="position"></div>

Answer 1

I believe you might be running into this bug.

The workaround that I found was to set pointer-events: none on all <use> elements. In my case, I needed to handle mouse events on my <use> elements, so instead I placed <rect> elements above them and attached my mouse handlers there.

Sadly, it doesn't look like Microsoft will ever fix this...

Answer 2

I think I have the same issue, and as far as I can work out, it's a bug in IE11 under windows 7. In my case I move the clicked SVG element into another group, but the same thing happens - no mouse events for the entire page thereafter.

I've tried many workarounds, including delaying the DOM change using setTimeout, handling the event at a higher level in the DOM, removing click handler before changing the DOM. Still the same result.

I'd really like to know if you get anywhere with this. I'll fill you in if I find a work around.