Comments (6)
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.
from angular-strap.
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.
from angular-strap.
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.
from angular-strap.
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?
from angular-strap.
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).
from angular-strap.
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.
from angular-strap.
Related Issues (20)
- Collapse with `allowMultiple` and `startCollapsed` collapses all panes when data is rebound HOT 2
- Template not found in cache when using an interceptor to modify outgoing request urls HOT 2
- how to set templateUrl dynamiclly for dropdown? HOT 3
- Check tipElement before use to prevent "Cannot read property 'on' of null" HOT 3
- Popover - event propagation- issue HOT 2
- angular strap typeahead filter otions issue HOT 3
- Close popover custom example HOT 2
- Datepicker month select display abnormal in IE11/Edge HOT 2
- how to make time picker editable from Owl Date Time Picker library HOT 2
- $modal is not a function HOT 2
- This type of constructor of Date drops milliseconds on IE 11.611.16299.0 HOT 4
- Angular strap Popover not working with AngularUi calendar. HOT 2
- Typeahead - strange issue in ios - cursor remains at first position on editing a field HOT 2
- is there a way to increase maxDate (year) to 9999 its now set to 2999 HOT 2
- Hide and destroy modal from controller when using controller as HOT 4
- 您好,我在IE11下,如果传入字符串形式的日期则显示为空 HOT 1
- Want to Open 2 Modal Pop up window on single button click in AngularJs using $uibModal.open command in App.js HOT 1
- Wrong Day Highlight on Calendar on Date before 1970 HOT 1
- Trying to get in touch regarding a security issue HOT 1
- tabs click detection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-strap.