title: jQuery mobile won't work on Google Chrome
body: <p>So, I can run this on Firefox and it works just fine. But when running this on Chrome, I'm getting a loading icon which keeps just 'loading'.</p>
  
  <p>Like this: <a href="http://prntscr.com/8erab4" rel="nofollow">http://prntscr.com/8erab4</a></p>
  
  <p>On Firefox the result is just great, example: <a href="http://weveloped.com/app" rel="nofollow">http://weveloped.com/app</a></p>
  
  <p>HTML CODE:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"&gt;
      &lt;title&gt;HorizonApp&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="custom.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!--Welcoming Page--&gt;
      &lt;div data-role="page" id="homepage"&gt;
      &lt;div data-role="header" class="header"&gt;
        &lt;a href="#panel" data-role="none"&gt;&lt;i class="fa fa-bars left"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;h1&gt;Horizon GPD&lt;/h1&gt;
        &lt;a href="#homepage" data-role="none"&gt;&lt;i class="fa fa-home right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div data-role="main" class="ui-content"&gt;
        &lt;div data-role="panel" data-position="left" data-display="overlay" id="panel"&gt;
          &lt;div class="sideMenu"&gt;
            &lt;ul&gt;
              &lt;li class="navTitle"&gt;Tijden&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tijdvak1"&gt;van 09:00 tot 11:00&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tijdvak2"&gt;van 11:30 tot 13:00&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tijdvak3"&gt;van 13:30 tot 15:00&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
          &lt;div class="content"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS CODE:</p>
  
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
  
  body {
      font-family: 'Open Sans', sans serif;
  }
  
  /* Header */
  .header {
      height: 40px;
      border: none;
  }
  
  .ui-page .ui-header {
      background-color: #013378;
      color: #FFF;
      text-shadow: none;
  }
  
  .header a i {
      font-size: 24px;
      color: #FC7C00;
      margin-top: 5px;
  }
  
  .header a i.left {
      margin-left: 5px;
  }
  
  .header a i.right {
      margin-right: 5px;
  }
  
  .header a:hover &gt; i {
      color: #FFF;
  }
  
  /* Side Menu */
  
  .sideMenu, .sideMenu ul {
      padding: 0; margin: 0;
      text-shadow: none;
  }
  
  .sideMenu ul {
      list-style-type: none;
      position: relative;
  }
  
  .sideMenu ul li.navTitle {
      height: 40px; line-height: 40px;
      background-color: #FC7C00;
      color: #FFF;
      font-weight:700;
      text-align: center;
  }
  
  .sideMenu ul li {
      display: block;
  }
  
  .sideMenu ul li a {
      height: 40px; line-height: 40px;
      padding-left: 10px;
      color: #222;
      text-decoration: none;
      display: block;
  }
  
  .sideMenu ul li a:hover {
  color: #FFF;
      background-color: rgba(1, 51, 120, 0.8);
  }
  
  .ui-panel-inner {
      padding: 0; margin: 0;
  }
  </code></pre>