CODEWITHSUNDEEP
androidgoogle-chromevirtual-keyboardandroid-chrome
DommeL
DommeL

Reputation: 31

Android Chrome (106) sometimes fails to resize to full screen after keyboard usage

I noticed a strange behaviour using Google Chrome for Android (Version 106.0.5249.79) on an Android 12 device: It seems that leaving an input field and therefore resizing the viewport to the complete screen height sometimes fails and the viewport remains shortened (leaving a blank area at the bottom). It seems to happen only sometimes - so there must a be a race condition involed. Firefox and Safari do not show this behaviour.

To be more concrete: I have a pretty simple HTML page:

<!doctype html>
<html lang="de" style="height:100%; margin:0">
<head>
    <meta charset="utf-8">
    <title>Window resizing</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" type="image/x-icon">
    <style>.frame {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        background-color: lightgoldenrodyellow;
        border: 5px solid green;
    }

    .app-content {
        overflow: auto;
    }
    </style>
</head>
<body style="height:100%; margin:0">
<div class="frame" style="flex-direction: column; box-sizing: border-box; display: flex;">
    <div style="background-color: red; flex: 0 0 auto; box-sizing: border-box;">HEADER</div>
    <div class="app-content" style="flex: 1 1 auto; box-sizing: border-box;">
        <input>
        <p>Content</p>
...
 </div>
    <div style="background-color: blue; flex: 0 0 auto; box-sizing: border-box;">
        FOOTER
    </div>
</div>

</body>
</html>

It simply shows a header and a footer with a content area full of dummy paragraphs. There is also in input field at the beginning of the content area.

Clicking at the input field shows the virtual keyboard, resizes the window (such that the footer is moved upwards). Clicking outside the input field hides the virtual keyboard and the viewport is resized to full screen (100%) again. This happens "most" of the times, but not always.

See the following small demo video: Demo Video - No resize after keyboard hide

It seems to be an isolated Chrome on Android issue. I was not able to reproduce the problem on Firefox or Safari.

Has anyone encountered a similar problem? What options are available to make sure that the full screen is used again after the user clicks outside an input field.

Best regards, Dominik

Upvotes: 1

Views: 344

Answers (0)

Related Questions