Tooltip shifts 1px

[cvn]

Hello,

I'm seeing an issue where tooltips shift 1px horizontally at the end of their fade in animation.

Here's a plunkr: http://plnkr.co/edit/nv8iDI6dyGxvByomZaNj?p=preview

Using Chrome or Safari, hover over each of the buttons a few times. As you move between them, you'll see the problem on the left and rightmost buttons.

Here's a gif showing it. In this gif, I log the offsetWidth of the tooltip in the positionElements function, because I think it's related. It returns different values for the same tooltip.

Here's another example, where the tooltip never stopped moving.

I think there's some kind of Webkit/Blink bug happening. The problem doesn't affect Firefox. I searched a little, but didn't find much about it. The closest thing was this Stack Overflow post about a similar offsetWidth problem.

This problem is only in ui.bootstrap 0.13.0. It is a regression from 0.12.1.

I'm using Angular 1.4.2 and Bootstrap 3.3.5 CSS. Testing with Chrome 43 and Safari 8 on a retina screen.

[cvn]

I can prevent the shift from happening by removing this $watch on line 249:

tooltipLinkedScope.$watch(function () {
  $timeout(positionTooltip, 0, false);
});

but I'm sure it's there for a good reason.

[wesleycho]

Thanks for this clear investigation - if I had to guess, this looks like a potential Webkit/Blink bug. I am not able to reproduce this on Firefox or on IE11.

The watch is there to reposition in the event something changed in the UI - a bit of a hack, but I'd be hesitant to touch it.

[cvn]

Thanks @wesleycho. I took a shot at fixing this in the above PR. It avoids the shift by being more deliberate about when to update the position.

P.S. I reported the offsetWidth bug to the Chrome and Safari teams:

• https://code.google.com/p/chromium/issues/detail?id=512307
• https://bugs.webkit.org/show_bug.cgi?id=147136