6

I am having a listener for displaying tooltips on hover which calculates the position of it using the jquery $.offset function.

On IE 11 I am getting horrible performance everytime that the listener is triggered causing a delay on showing the tooltip or even the hover css class of the element.

The part where the target elements are is embed on an angular app, if I load it directly the performance is just fine like in other browsers and I can see the call to getBoundingClientRect takes small time but if I interact with other views on angular before going to this one then the performance goes bad as it is shown in the screenshot.

(I know I shouldn't use jquery inside angular but I am pretty sure the problem is not because of that since it is working the first time I load the page and in other browsers too)

How could I avoid this layout recalculation or how I could find out what is causing this issue ?

enter image description here

joe4
  • 69
  • 6
  • Is `getBoundingClientRect` your function so that you can post the code? My guess at this point is that somewhere, it's calling the browser-native `offsetWidth`, which is known to be excruciatingly slow in IE in some scenarios (such as when interacting with a large table). – TLS Oct 22 '15 at 14:13
  • @TLS https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect But i guess you could be right regarding offsetWidth and IE – A. Wolff Oct 22 '15 at 14:20
  • @A.Wolff I see - didn't realize it was a native method. Any time the "real" dimensions are needed, the browser must calculate everything around the element - anything that might impact the size/position of the element *and* anything affected by the size/position of the element. I'm curious to know the context of the element in question. That will have the biggest impact on this particular calculation. – TLS Oct 22 '15 at 15:18
  • What strikes me as odd that this is only happening when there was some navigation inside AngularJS, while when loading the page directly it does not happen. – Luksurious Oct 22 '15 at 15:23
  • you can try some. 1. try to create that part of UI in hidden div and move nodes after done. 2. get source code of $.offset and implement it without using jquery. 3. not much suitable for this but try do one-time binding if you havn't done it yet. 4. create jsfiddle that reproduce the issue, so someone will figure some workaround 5. rewrite it without using jquery or without angularjs. – YOU Oct 24 '15 at 10:24

0 Answers0