CODEWITHSUNDEEP
internet-explorersvg
pjgat09
pjgat09

Reputation: 133

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

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>

Upvotes: 5

Views: 1072

Answers (3)

John McCann
John McCann

Reputation: 315

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

Upvotes: 2

pjgat09
pjgat09

Reputation: 133

I found a workaround that suits my needs. The problem seems to involve the cursor being right on top of the text when it changes, so I added an invisible div on top of the SVG and changed the mousemove event to that div. The cursor becomes the pointer type instead of the "text" type (i-beam), and the page no longer freezes when the textbox is changed.

Here's the working example: http://jsfiddle.net/zzbar210/6/

var pt;

$(document).ready(function() {

  pt = document.getElementById("layout_area").createSVGPoint();

  $("#cover").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();
  });
});
<input type="text" id="label_text" />
<br />
<div style="position: relative; height: 200px">
  <svg width="400" height="200" viewbox="0 0 400 200" xmlns:xlink="http://www.w3.org/1999/xlink" id="layout_area" style="overflow: hidden; z-index: 0; position: absolute; left: 0; top: 0;">
    <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>
  <div id="cover" style="position: absolute; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,0); height: 200px; width: 400px"></div>
</div>
<br />
<br />
<div id="position"></div>

Upvotes: 0

Rupert Curwen
Rupert Curwen

Reputation: 41

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.

Upvotes: 1

Related Questions