popover content flickering

[mgcrea]

popover content flickering

[mgcrea]

What browser are you using? I don't have any flickering using Chrome on the docs. I do however have theses when I'm visiting the docs from iOS.

The issue is that this would lead to a delay when clicking on the popover, and that's bad too.
It should not flicker everytime, so I'll see if I can come up with something better.

[damiengenet]

This happens when the popover content length may vary a lot between the template state and the compiled one (for instance using long content inside ng-show or ng-switch). I'm using mainly Firefox and sometime this is more noticeable than others. This also happens in Chrome but usually fast enough that it is barely noticeable.

The problem comes from the fact that the template is first injected in the dom by the popover while being opened, and that it will only be compiled later with a timeout. This mean that in between the dom injection and compiling some redraw cycle will have happened. Depending on the browser and the page load a 0ms timed out dom change can be delayed enough to be clearly noticeable especially if the ui reflow is big between the temporary state and the final one.

There's probably a reasonable solution but for now it eludes me, and my knowledge of the AngularJS internals is rather limited. I tried experimenting with the code to delay through other means than a timeout without much success. Similarly if the content is compiled before being passed to the popover, the view is half workfing/half broken because AngularJS reacts badly when a compiled fragment has been moved to an other part of the dom.

[mgcrea]

Indeed I had theses broken bindings issues led to the current two step compilation.
I'm not sure we can find a way around Angular internals when the dom element is duplicated by bootstrap.
There may be something to do with some visibility delay.

[mgcrea]

Hey, I think this patch should fix your issue, can you try the latest master? (you can build a minified file with grunt build) & tell me if it fixes your problem?

[damiengenet]

Sorry I didn't had time to finish investigating on the problem last week.

Your commit indeed fixes the flickering problem. However, in the use-case I'm working on, the recursive timeouts creates a 150-200 ms delay before the popover is visible. Unfortunately this is just over the threshold of user perception and would lead to perceived slowness of the application (the popover UX pattern is used intensively there so this is a major problem).

I sent a slightly different fix which completely avoids timeouts and halves the visibility delay. This solution is still not optimum but at least the delay is much more difficult to notice. Best would still be to compile only once beforehand, as this operation is extremely slow, but I couldn't find any viable workaround for it.

ps: I sent a pull request, but I couldn't find how to attach it to this issue in the GitHub interface. I had some problem with the build system on my environment so let me know if any regression was introduced.

pps: The events are now emitted only after the show/hide has actually happened. Btw does any angular-strap code rely on these events? It might be best to just remove this part and advise people to rely on Bootstrap 2.3 if they need this feature (the if(!$.fn.tooltip.Constructor.prototype.applyPlacement) test breaks if jQuery UI and Bootstrap are included together in the page).

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.