htmlcssgoogle-chromemobile

Fixed elements disappear when keyboard opens in Chrome Mobile


I created this simple HTML page with a fixed bar at the top and a fixed text element at the bottom. When scrolling, everything stays fixed as intended both at the top and bottom. However, when clicking inside the text field at the bottom, activating the focus and causing the keyboard to appear, if you then scroll, the fixed divs disappear in the Chrome Mobile browser. When you scroll in the opposite direction, they reappear. This behavior wasn't present in earlier Chrome versions. Is it possible to prevent the fixed boxes from collapsing when the focus (keyboard open) is active, or ensure they remain visible?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixed Elements</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    #oben {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: lightblue;
      padding: 10px;
      height: 50px;
    }
    #unten {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: lightgreen;
      padding: 10px;
    }
    #textbereich {
      width: 95%;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id="oben">
    <p>Here is the fixed content at the top.</p>
  </div>
  <div style="height: 3000px; border: 1px solid; margin: 20px;">text</div>
  <div id="unten">
    <textarea id="textbereich" placeholder="Fixed text area at the bottom"></textarea>
  </div>
</body>
</html>

Solution

  • Proplem

    Google Chrome for Mobiles had made this change after version 108 since they saw that this behavior is affecting a lot of users and web developers. It was a real miss to deal with complex UI and popup windows on half, mobile screen. Link below to read their full announcement.

    Solution

    They have added a new meta key to all the old behavior to function on your intended behavior. Simply, add this line to your meta tags...

    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
    

    Source: https://developer.chrome.com/blog/viewport-resize-behavior/