knee-cola · June 6, 2018 13:48
diff --git a/chrome-mobile-footer-bug.html b/chrome-mobile-footer-bug.html
 <!DOCTYPE html>
 <html lang="en" >

 <head>

  <meta charset="UTF-8">
  <title>Debugging footer rendering od mobile Chrome</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0">
      <style>
      body {
  margin: 0;
 }

 .footer {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
 }

 h1, p, em, ol {
  margin: 1rem;
 }

 h1 {
  font-size: 2em;
 }

 em {
  color: red;
  font-size: 1.2em;
  display: block;
  margin-bottom: 0;
  margin-right: 0;
 }

 ol {
  background: yellow;
  border: 1px solid black;
 }

 #footer-button-abs {
  position: absolute;
  top: -50px;
  left: 5px;
  
 }
 #footer-button-fixed {
  position: fixed;
  bottom: 5px;
  right: 5px;
 }

 #footer-button-abs,
 #footer-button-fixed{
  background: cyan;
  
  cursor: pointer;
  padding: 5px;

  font-size: 1em;
  line-height: 1.8;
  text-align: center;
  white-space: nowrap;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }
    </style>

  
  
  
  

 </head>

 <body translate="no" >

  <h1>Instructions - part 1</h1>
 <em><strong>IMPORTANT:</strong> read and follow the instructions carefully!</em>
 <ol>
  <li>scroll to bottom (until you see "Welcome to the bottom" message</li>
  <li>follow instructions at the bottom</li>
 </ol>
 <h1>Lorem ipsum 1</h1>
 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident officiis vel consequuntur laudantium dignissimos fugiat dicta, eum voluptate eligendi non, quam omnis ipsam delectus pariatur molestias maxime animi. Atque, earum?</p>
 <p>Facilis cumque a pariatur repellat tempore odio optio quis iste neque libero ex et, quasi ipsam magni vero quae necessitatibus facere veritatis molestias quam consequatur, possimus deleniti! Esse, necessitatibus totam.</p>
 <p>Temporibus asperiores assumenda maxime architecto ducimus natus reprehenderit, beatae accusamus iusto ipsam pariatur dolorem perspiciatis, fugiat at quas quibusdam consequatur. Neque adipisci aspernatur expedita qui id et, non laborum earum!</p>
 <p>Aperiam possimus sint optio non harum doloribus nesciunt id enim ipsum repellendus repudiandae sed minus omnis deserunt sit mollitia ipsam vel eos aut, earum perspiciatis nostrum. Distinctio fugiat corporis vero.</p>
 <p>Dignissimos provident sapiente perspiciatis, nisi repellat minima esse possimus! Officia at, iure dolor, veniam ut, error delectus aspernatur assumenda eos cum nemo. Sapiente atque voluptatem, rerum est amet vel accusantium.</p>
 <p>Quaerat nihil optio sunt illo reiciendis obcaecati harum dolorem doloribus? Quasi ducimus maiores voluptate, quae ipsum harum repellendus consectetur dolor sit repellat hic quibusdam inventore facilis voluptas cupiditate dolores quaerat!</p>
 <p>Dolores voluptas odio aperiam vero consectetur quae eius, deserunt rem quisquam, nihil veniam impedit inventore provident. Officiis consequuntur voluptatem vitae, non expedita itaque culpa possimus eveniet, qui placeat reprehenderit fugiat.</p>
 <p>Id laboriosam tenetur necessitatibus eveniet architecto, dicta modi voluptate, adipisci autem minus quam sunt explicabo iure magni corrupti, neque ad est excepturi aliquid optio nulla illo dolores iusto nihil. Veniam.</p>
 <p>Cumque hic quas quae voluptatum amet quis est temporibus eius, aliquid nisi porro facilis ab! Inventore, beatae asperiores molestias, fuga magni mollitia dignissimos necessitatibus distinctio maiores exercitationem nihil animi blanditiis!</p>
 <p>In totam sunt esse quasi facilis corrupti dolorem nisi recusandae qui exercitationem, voluptate incidunt laborum labore dolor sint itaque accusamus id cumque atque ut illo voluptas beatae pariatur soluta! Ipsam.</p>
 <p>Commodi sunt dolorum laudantium incidunt provident totam tenetur sequi, molestiae doloribus enim quia nisi iusto atque nihil. Eaque voluptates nihil, repudiandae omnis praesentium, harum expedita, ab nemo animi reiciendis reprehenderit.</p>
 <p>Veritatis modi illum delectus, eum recusandae ab obcaecati distinctio suscipit nostrum? Voluptatem incidunt aut, reiciendis sunt tempore quisquam fugiat iste harum quaerat nostrum, alias ratione explicabo delectus assumenda sapiente cumque.</p>
 <p>Asperiores dolore dolores perferendis amet molestiae repudiandae incidunt enim, architecto minima natus officiis eaque illo error exercitationem vitae ut quaerat blanditiis, accusantium corrupti consequuntur inventore. At, temporibus! Provident, harum quas?</p>
 <p>Beatae, quas aut? Asperiores, provident? Soluta odit voluptatum harum molestiae, iste officiis earum quod tenetur placeat dicta ad labore vel quisquam sint eius tempore cum ipsum repellendus aperiam? Vero, iste!</p>
 <p>Recusandae maiores possimus, tempore id doloribus similique magnam officiis ex et aspernatur inventore animi vel laboriosam cum quisquam ut tenetur dolorem nam. Assumenda temporibus id, necessitatibus pariatur ad voluptatum perferendis?</p>
 <p>Commodi rem hic assumenda impedit, praesentium molestias aliquid voluptate, perferendis aspernatur, necessitatibus asperiores debitis placeat quibusdam. Tenetur debitis qui neque! Dignissimos ut dolorum possimus quibusdam quam qui aut. Iure, enim?</p>
 <p>Exercitationem nostrum ea similique odio ullam impedit repellat consectetur cum ab id fugit, et cupiditate dolor provident! Perspiciatis distinctio, laboriosam dolorem animi odit consequuntur rerum aspernatur! Ducimus dolor est molestiae!</p>
 <p>Dolorum cum repellat magni nostrum alias natus suscipit, nulla quia magnam odit earum at laborum quisquam labore in voluptas. Officia iure sapiente asperiores provident pariatur quae ratione corporis a unde.</p>
 <p>Explicabo, impedit! Voluptatem, nulla. Minima natus sit autem molestiae doloribus, dolorem maiores harum eaque tenetur corporis, qui nam sequi adipisci, eveniet accusamus quo quasi magnam iure et voluptatem possimus culpa!</p>
 <p>Ullam, tenetur eum minus magni veniam saepe fuga aliquam accusantium perferendis maxime rem error ea odit voluptatum voluptate vitae natus reprehenderit necessitatibus facilis. Vitae velit asperiores placeat architecto numquam iste?</p>
 <p>Quaerat temporibus fuga maxime ea aperiam! Nihil ab eum nulla ea assumenda optio, natus qui ipsum impedit ipsam obcaecati odit beatae recusandae illo, pariatur sunt quas unde facere dicta eius.</p>
 <p>Libero nam laborum reprehenderit dignissimos adipisci, enim facilis, officia consequuntur ea magni quo ab consequatur aperiam culpa fuga alias cum doloribus! Dolores quasi voluptate nam unde autem perspiciatis, soluta nulla!</p>
 <p>Expedita iste quia odio illo, quas numquam in, doloremque rerum officiis optio ipsa quos at alias blanditiis debitis tenetur enim ipsam dolores amet quo quasi suscipit porro similique? Quam, odio!</p>
 <p>Exercitationem repudiandae fugiat quod dolore nihil suscipit ipsam et, dolores quis dicta pariatur sit quia cumque ab consectetur illum labore nam molestiae, facilis magni itaque laboriosam perspiciatis. Repudiandae, quas sunt.</p>
 <p>Quod, quasi excepturi ab recusandae dicta exercitationem reiciendis nobis optio? Voluptates perferendis placeat necessitatibus odit delectus repellendus voluptate nulla ab dolorum beatae quis architecto pariatur, mollitia dolorem explicabo exercitationem eaque.</p>
 <p>Deserunt modi incidunt architecto distinctio. Et at provident, debitis voluptas reprehenderit quod dolores, fugiat dolore quas laboriosam id cum iure sit, odit necessitatibus distinctio recusandae molestias iste. Porro, praesentium magnam.</p>
 <p>Ipsa exercitationem cum omnis sunt voluptas libero neque sed commodi voluptatibus sit dicta tempora maxime, eveniet hic adipisci, qui similique architecto facere doloribus numquam blanditiis fugiat. Iusto sint aliquid quisquam.</p>
 <p>Aut quibusdam nisi doloribus tempore distinctio maiores adipisci magnam eum ex esse facere enim ipsa rerum, provident ipsam velit, voluptates voluptas! Omnis accusantium, iusto expedita eos vel magni nemo voluptatem?</p>
 <h1>Instructions - part 2</h1>
 <ol>
  <li>browser has hidden the address bar</li>
  <li>scroll up until browser displays the address bar</li>
  <li>again scroll down until the browser hides the address bar</li>
  <li>try pressing the button - it's <b>NOT</b> is working</li>
  <li>scroll up until browser displays the address bar</li>
  <li>try pressing the button - it <b>IS</b> is working</li>
 </ol>
 <em style="text-align: center; padding-bottom: 60px">Welcome to the bottom!</em>
 <div class="footer">
  <button id="footer-button-abs">Abs Clicked 0x</button>
 </div>
 <button id="footer-button-fixed">Fixed Clicked 0x</button>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

  

    <script >
      var absCount = 0;
 var fixedCount = 0;

 $('#footer-button-abs').click(function() {
  $('#footer-button-abs').html("Abs Clicked "+(++absCount) + "x");
 });

 $('#footer-button-fixed').click(function() {
  $('#footer-button-fixed').html("Fixed Clicked "+(++fixedCount) + "x");
 });
    </script>

 </body>

 </html>