ng-mouseover and ng-mouseleave events not working on chrome

Question

I have set up the following in my angular app

I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag

<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}"  ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />

These mouse over events are then sent to the following div

<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>

Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.

However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.

Anyone know why this is the case?

Answer 1

I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).

If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).

In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.