Mouse Events are not delivered at all anymore when inside an SVG a "Use" is removed from the DOM

Fixed Issue #205775

Details

Created
May 13, 2014
Privacy
This issue is public.
Found in build #
0.0011
Reports
Reported by 0 people

Sign in to watch or report this issue.

Steps to reproduce

• Explain why the bug must be serviced.
Externally reported regression in IE11 that can cause a page to become unusable by mouse.

• Brief description of the bug and the proposed fix including what code change caused the bug, what fixes were considered, and the risk of the proposed fix.
Generated content in our tree occupies CTreeNode objects that can be displayed to the user. As a result, these CTreeNodes can become the node the mouse is over, known as the hovered node. However, these generated content CTreeNode do not have a corresponding CElement, so they cannot receive the ElementExitTree notification, which is where we detect if the hovered node is exiting the tree. Because of this, if a generated content CTreeNode is the hovered node, there is no way for it to give up its hovered state as it will never find out it is leaving the tree. Then, some mouse handling code can’t handle the fact that the hovered node is not in the tree anymore and the entire mouse input stack fails out.

To work around this for SVG use scenarios, InetCore CL 628335 was introduced in IE9. This change would detect if the given tree node was a generated node, and if it was contained below the element that was being removed. This worked fine because in general subtrees receive the ElementExitTree notification before the tree is modified, so the generated tree node that was the hovered node would still be present in the tree and we could detect the generated CTreeNode was removed and disconnect it from its hovered node status.

In IE11, InetCore CL 1248857 broke the assumption of the workaround by removing all generated content CTreeNodes before the ElementExitTree notifications could be sent. As a result, when the use element received its ElementExitTree notification the hovered node was no longer below it, so it could not disconnect the hovered node.

This change adds new infrastructure that handles when a CTreeNode exits the tree to clear its hovered (and any other special) status and then calls this for all generated nodes that are removed. This will allow the hovered node to properly release itself from its hovered status and not rely on the state of the tree otherwise.

• What testing has been done on the fix and what additional impacted areas need to be regressed?

  • Verified fixed in Win7 IE11. No repro in WinBlue
  • Ad-hoc tested around append/remove child SVG nodes on mouse events. Same testing was done on WinBlue
  • No regressions in P0 SVG
  • No regressions in touch hover scenarios
    • What binary or binaries is the fix affecting? If manifest only, what binaries change their behaviors? (Binaries with dependencies can be identified using the reSearch Analysis tool.)
    mshtml.dll
    • Is this a UI change that will affect localization? How important is it that this fix be localized for RTM languages?
    No
    • Can this bug RI back to WinMain (next milestone)? If not, tag the bug “Don’t RI to WinMain”.
    Yes
    • Would this change trigger a need for an update from DevDiv/Visual Studio?
    No
    • Does this bug have a cross-team dependency?
    No
    • Code reviewed by: ShuoDong; Dev Manager Signoff by: YY; Test Manager Signoff by: ZZ

URL = http://jsfiddle.net/QbW2b/

URL:

Repro Steps:

IE11 preview on Windows 7: open http://jsfiddle.net/QbW2b/

Click exactly on the gray bar inside the red rectangle below the button

The SVG element will be removed and no mouse interaction is possible anymore.

Code:

The HTML with a div and an embedded SVG that has a “use” reference to display an icon on a red rectangle:

<button type="button">Click Me!</button>
<div id="app" style="left: 0px; top: 31px; position: absolute; height: 439px; width: 800px;">
<svg xmlns="http://www.w3.org/2000/svg" style="overflow:hidden; display:block; width:100%; height:100%;" id="svgPanel">
<g>
<g transform="translate(10 10)" id="group1">
<rect fill="rgb(255,0,0)" stroke="rgb(255,0,0)" width="60" height="30" rx="4" ry="4" stroke-opacity="1" stroke-width="1" fill-opacity="1" id="rect1"></rect>
<use xlink:href="#expand_icon" id="icon1"></use>
</g>
</g>
<defs>
<g id="expand_icon" transform="translate(21 6)“>
<rect fill="none” stroke="#ffffff" stroke-width="3" x="1" y="6" width="16" height="6"></rect>
<rect fill="#999999" stroke="none" x="1" y="6" width="16" height="6"></rect>
</g>
</defs>
</svg>
</div>

Javascript registers a mouse listener on the div that contains the SVG - the listener removes the use element from the DOM:

    var app = document.getElementById("app");
    app.addEventListener("mousedown", mouseDownListener, false);

function mouseDownListener(evt) {
    var rect = document.getElementById("group1");
    if(rect !== null) {
        rect.parentNode.removeChild(rect);
    }
}

Environment:

  • Internet Explorer 11.0.9431.0 Preview under Windows 7 SP1 64 bit
  • Not reproducible with IE 11 under Windows 8.1 Preview
  • Not reproducible with IE 10 under Windows 7 or Windows 8

Expected Results:

Mouse events should not stop working - you should still be able to click on buttons, receive events, etc. - this way the page seems frozen (although it isn’t, it just doesn’t get any input at all)

Actual Results:

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “IPBS P.”

      Changed Status to “Fixed”

      Changed Assigned To from “IPBS P.” to “Rossen A.”

    You need to sign in to your Microsoft account to add a comment.

    Sign in