Issue
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/
Answered By - Mohammed Alkebsi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.