Overcome IE11 performance for rendering svg and css events
As per our current implementation of SVG icons throughout was somehow creating a situation for IE11 browser to stop responding after a period of time.
Final approach taken to resolve the cause of this issue was to track and decease the events of SVG which somehow prevents browser engines to run smooth as per defined transitions for graphics to load.
I could track this with a CSS3.0 property called pointer-events. Researched on the same by referring few links https://www.w3.org/TR/pointerevents/
and https://developer.mozilla.org/en/docs/Web/CSS/pointer-events.
Solution: Need to set this property for <use> tag at global level in CSS,
svg use {pointer-events: none}
Out of all the values of this property I used none.
Reason: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
At current scenario of this solution I would request to have a quality check done for the same, for different other browsers inclusive and exclusive of IE.
