title: Odd performance with Firebase Authentication Screen in jQuery Mobile web application
body: <p>I'm working on a jQuery Mobile site, utilizing Firebase Authentication.  In my case we're using the auth tokens (with <a href="https://firebase.google.com/docs/auth/admin/custom-claims" rel="nofollow noreferrer">custom claims</a>) to restrict access to a team telephone roster. If you aren't on the team, the node server won't offer up that content.  The ajax call, authentication verification and server stuff all works great.  What doesn't work is the appearance for first time login.</p>
  
  <p>When the website is first displayed and then the Phonelist page is selected, (<code>http://localhost/#phone_list</code>) we see this:  </p>
  
  <p><a href="https://i.stack.imgur.com/WRaUI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WRaUI.jpg" alt="oops, no box visible for entering phone number"></a></p>
  
  <p>The page is unusable in this form.  There is no place to enter a phone number.  </p>
  
  <p>When the page is simply refreshed, the display converts to:</p>
  
  <p><a href="https://i.stack.imgur.com/kxSa4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kxSa4.jpg" alt="display now looks great..."></a></p>
  
  <p>Obviously this is exactly how it should look. There is a readily identifiable space for the user to enter a mobile phone number.</p>
  
  <p>This is very repeatable.  I'm assuming this has something to do with the timing of the Javascript class entries.  The enter phone number content, is all coming from a 'canned' javascript element from Google.  </p>
  
  <p>When I inspect the key elements in Chrome dev tools, I see... </p>
  
  <p>Problem display: </p>
  
  <pre><code>&lt;button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button ui-btn ui-shadow ui-corner-all" data-upgraded=",MaterialButton"&gt;
       &lt;span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"&gt;&lt;/span&gt;
       &lt;span class="firebaseui-id-country-selector-code"&gt;‎+1&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>After a simple refresh:</p>
  
  <pre><code>&lt;button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button" data-upgraded=",MaterialButton"&gt;
       &lt;span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"&gt;&lt;/span&gt;
      &lt;span class="firebaseui-id-country-selector-code"&gt;‎+1&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>The whole refresh thing isn't a great fix. My users are way confused. I'm overriding key CSS elements to make this remotely functional, but I'm not quite sure how to best fix this.  Because of the jQueryMobile navigation functioning, there really isn't a simple way to perform a repaint / refresh of this 'page'.  I did find this <a href="https://stackoverflow.com/questions/7663078/jquery-mobile-page-refresh-mechanism">reference posting</a>, but it doesn't seem to be of much help.</p>
  
  <p>Any ideas on how to make this fully functional?  </p>