Odd performance with Firebase Authentication Screen in jQuery Mobile web application

Question

I'm working on a jQuery Mobile site, utilizing Firebase Authentication. In my case we're using the auth tokens (with custom claims) 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.

When the website is first displayed and then the Phonelist page is selected, (http://localhost/#phone_list) we see this:

The page is unusable in this form. There is no place to enter a phone number.

When the page is simply refreshed, the display converts to:

Obviously this is exactly how it should look. There is a readily identifiable space for the user to enter a mobile phone number.

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.

When I inspect the key elements in Chrome dev tools, I see...

Problem display:

<button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button ui-btn ui-shadow ui-corner-all" data-upgraded=",MaterialButton">
     <span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"></span>
     <span class="firebaseui-id-country-selector-code">‎+1</span>
</button>

After a simple refresh:

<button class="firebaseui-id-country-selector firebaseui-country-selector mdl-button mdl-js-button" data-upgraded=",MaterialButton">
     <span class="firebaseui-flag firebaseui-country-selector-flag firebaseui-id-country-selector-flag firebaseui-flag-US"></span>
    <span class="firebaseui-id-country-selector-code">‎+1</span>
</button>

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 reference posting, but it doesn't seem to be of much help.

Any ideas on how to make this fully functional?

Answer 1

Here's a fix, but it's a total hack. I carefully examined the class structure before and after. Apply brute force using CSS specificity.

$(document).on('pagecreate', "#phone_list", function() {
    console.log("on #phone_list 'page' ");
    $('#firebaseui-container button').removeClass("ui-btn ui-shadow ui-corner-all");
    $('div.mdl-textfield div.ui-input-text').removeClass("ui-input-text");
});

Answer 2

The ui-btn ui-shadow ui-corner-all ui-input-text are JQM classes. To prevent the JQM auto-enhancement You need to set the default ignoreContentEnabled to: true and then mark the html container part with the JQM data attribute data-enhance="false". This has been already pointed out in some previous SO answers.

I believe this is a nice question, because It would be perfect if, all the other mixed JS/CSS libraries had the same feature to skip enhancement. Regarding the intersecting CSS styles, there is nothing else to do that use CSS specificity or the important declaration.

Below is a concrete example: JQM together with Material Design Lite

function injectCard() {
  var card = ['<div class="mdl-card mdl-shadow--2dp">',
    '<div class="mdl-card__title">',
    '<h2 class="mdl-card__title-text">Welcome</h2>',
    '</div>',
    '<div class="mdl-card__supporting-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>',
    '<div class="mdl-cell">',
    '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">',
    '<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">',
    '<label class="mdl-textfield__label" for="sample4">Number...</label>',
    '<span class="mdl-textfield__error">Input is not a number!</span>',
    '</div>',
    '</div>',
    '<div class="mdl-card__actions mdl-typography--text-right">',
    '<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Cancel</a>',
    '<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Verify</button>',
    '</div>',
    '</div>'
  ].join("");
  $("#container").html(card);
  componentHandler.upgradeDom();
}

$(document).on('pagecontainershow', function(e, ui) {
  $.mobile.loading("show");
});

$(document).ready(function() {
  // Just a test
  setTimeout(function() {
    $.mobile.loading("hide");
    injectCard();
  }, 1000);
});

/* Some manual adjustmets */

.mdl-textfield__label {
  margin-bottom: 0px !important;
}

.mdl-button {
  font-weight: 500 !important;
}

.ui-header .ui-title,
.ui-footer .ui-title {
  font-weight: inherit;
  font-size: 1.250em !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript">
    $(document).on('mobileinit', function() {
      $.mobile.ignoreContentEnabled = true;
    });
  </script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header">
      <h1>Login</h1>
    </div>
    <div role="main" class="ui-content">
      <form>
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>Enhanced by jQuery Mobile:</legend>
          <label for="select-h-2a">Select A</label>
          <select name="select-h-2a" id="select-h-2a">
            <option value="#">One</option>
            <option value="#">Two</option>
            <option value="#">Three</option>
          </select>
          <label for="select-h-2b">Select B</label>
          <select name="select-h-2b" id="select-h-2b">
            <option value="#">One</option>
            <option value="#" selected>Two</option>
            <option value="#">Three</option>
          </select>
          <label for="select-h-2c">Select C</label>
          <select name="select-h-2c" id="select-h-2c">
            <option value="#">One</option>
            <option value="#">Two</option>
            <option value="#" selected>Three</option>
          </select>
        </fieldset>
        <input name="search-1" id="search-1" value="" type="search">
      </form>
      <hr>
      <div data-enhance="false" id="container">
        <legend>Not Enhanced</legend>
      </div>
    </div>
  </div>
</body>

</html>