Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select element "flickers" on first page load

See original GitHub issue

The use of $timeout (angular-chosen.js, line 72, see below) postpones the initialization of the chosen plugin to a later digest cycle. Because of that, the plain HTML select element will be painted first, leading to an ugly “flickering effect”.

             $timeout(function() {
                chosen = element.chosen(options).data('chosen');

Another approach to make sure the DOM is ready (without flickering) would be the default jQuery way:

              $(document).ready(function () {
                chosen = element.chosen(options).data('chosen');

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

boeserwolfcommented, Jul 26, 2016

Hi @leocaseiro, thanks for your quick reply. I’ve updated the tests as well.

boeserwolfcommented, Jul 27, 2016

@mehmetenes Here’s a gist to a patched version of the directive I use in my project for now:

As mentioned above, I solved the issue by using angular.element(document).ready() inside the link function. So the chosen plugin will be initialized as soon as the DOM becomes ready, which works like a charm.

@leocaseiro I don’t think that using angular.element(document).ready() inside the link function is a really bad solution. $timeout() ensures element.chosen() get’s called after the DOM was rendered. What we really want, is to apply element.chosen() as soon the DOM is available.

Just digged into the angular source: $timeout() wraps the callback in a try-catch construct, gives you control whether to call $rootScope.apply() and returns a nifty promise. The “flickering issue” remained if you’d use window.setTimeout() instead, because element.chosen() needs to be applied before the DOM is rendered. But I may be totally wrong. 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Page flickers on load - hide/show javascript - Total Newbie
I have been researching this and I hear it's called DOM flicker. I know it's due to the hidden divs showing before the...
Read more >
Your Guide to Website Flicker and How to Deal With It
Flicker refers to the experience of a webpage loading once, and then quickly changing content to display something new. It happens when you...
Read more >
Script to Move Language Selector Box Flashes for Split ...
1) Welcome page loads, Language Selector Box (LSB) displays below Next button. (good!) 2) Click Next to go to next page, LSB flashes...
Read more >
Avoiding content flickers (FOOC)
This is especially true for content near the top of your web page, as this flicker generally happens immediately after a page is...
Read more >
Dropdown menu flickering when navigating between pages
The dropdown menu in the header region flickers (shows for a very short time) when navigating between pages. It does not happen on...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found