Skip to content

Instantly share code, notes, and snippets.

Last active August 2, 2017 06:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
IE arc events

Pretty strange behavior in Internet Explorer 9, 10, 11. The red arc has dimensions 1000x smaller than the blue, but is scaled up 1k times, therefore is visually equivalent. The mouse events on the red arc get incorrectly triggered on the whole rectangular bounding box that encompasses the arc, while for the blue only over the fill area as expected. Malfunction found only on IE browsers.

Edge bug reported at:

<script src=""></script>
var arcG ='body').append('svg')
.attr('width', window.innerWidth)
.attr('height', window.innerHeight)
.attr('transform', 'translate(' + (window.innerWidth/2) + ',' + (window.innerHeight/2) + ')');
arcG.append('path').style('fill', 'blue')
.attr('d', d3.arc()
arcG.append('path').style('fill', 'red')
.attr('d', d3.arc()
.endAngle(Math.PI * 2)()
.attr('transform', 'scale(1000)');
.style('opacity', 0.3)
.on('mouseenter', function() {'opacity', 1); })
.on('mouseleave', function() {'opacity', 0.4); });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment