Popover "jumping" upon display

[marvelvang]

In the current angular-ui bootstrap version 0.13.4, with current angular and angular-animate 0.14.5, in some cases popovers will "jump" during displaying. In detail, after the popover bound element triggers, the popover is shown in the top left corner of the position parent for a brief moment before it is correctly positioned next to the triggering element, which I came to call "jumping" or "flickering".

For replication just use the official plunkr from the docs
https://angular-ui.github.io/bootstrap
for the popover component. These default cases work, but if the mouseover example button

      <button popover="I appeared on mouse enter!" 
      popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>

is changed to

      <button popover="I appeared on mouse enter!" 
      popover-animation="false"
      popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>

the jumping starts. For a brief moment, most of the time, upon mouse enter the popover is first display top left corner, then shortly after at the appropiate position next to the button.

In the cases when this happen, it does not happen always but most of the time. I can replicate it as described in current Chrome, Firefox and IE 11, where it seems to happen more rare in Firefox.

Since this occurs even in the official plunkr and not only in my web app, I have looked in the code file bootstrap/src/tooltip/tooltip.js.
In my understanding, the new popover element is visibly and unpositioned added to the dom, while positioning happens after a timeout. This timeout gives the browser a brief moment to display the popover element without proper positioning, which is then shortly after corrected. This explains the jumping or flickering effect.

As workaround for myself I have fixed this by moving the visible setting of the element out of the initial show() and into the positioning timeout function, thus showing the element only after position styles are set, eliminating the jumping:
Moved line 3488

              tooltip.css({ display: 'block' });

to after line 3411

                  tooltip.css(ttCss);
                  tooltip.css({ display: 'block' });

Of course this is not an optimal solution, changing a 3. party file for myself. I also cannot assess potential side effects to this or other components - living with the risk for now. I would be very happy if someone abler than me could look into this and maybe fix this in a future version. Thank you.

[RobJacobs]

See PR #4363