Sticky position lost while native dropdown or virtual keyboard appears - html

Question

I have a page where Header is position: sticky element and body scrolls. Whenever I scroll the body, everything behaves as they should — the content scrolls, header remains sticky to the viewport.
But the problem occurs in iPhone. When I focus on the text-box of a select dropdown . Virtual keyboard opens. Everything looks fine till now. However, when I scroll the content, The Header loses its stickiness and start scrolling with the content. Weren’t they position: sticky?
Is this because the device doesn’t honor any position: fixed/sticky elements, when the virtual keyboard is open?
PS: In my case I have tried using -webkit-position: sticky as many have suggested. Yet position: fixed element behaves like position: static when the native keyboard is open.
In these links you can find a demonstration of the problem
when keyboard is not opened
and
when select dropdown is open
when keyboard is open
you can see the header has gone above the viewport when the virtual keyboard is open... i have also reproduced the bug in the snippet below...
#import url('httpss://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
padding:0;
box-sizing: border-box
}
.text{
padding: 10px
}
.signup-form {
font-family: "Roboto", sans-serif;
margin:30px auto;
background:linear-gradient(to right, #ffffff 0%, #fafafa 50%, #ffffff 99%);
}
.form-header {
background-color: #EFF0F1;
position: sticky;
top: 0;
}
.form-header h1 {
font-size: 30px;
text-align:center;
color:#666;
padding:20px 0;
border-bottom:1px solid #cccccc;
}
/*---------------------------------------*/
/* Form Body */
/*---------------------------------------*/
select{
width: 100%;
}
.form-body {
padding:10px 40px;
color:#666;
}
.form-group{
margin-bottom:20px;
}
.form-body .label-title {
color:#1BBA93;
font-size: 17px;
font-weight: bold;
}
.form-body .form-input {
font-size: 17px;
box-sizing: border-box;
width: 100%;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: #333333;
text-align: left;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
.horizontal-group .left{
width: 100%;
}
.horizontal-group .right{
width: 100%;
}
input{
outline: none;
cursor:pointer;
}
#range-label {
width:15%;
padding:5px;
background-color: #1BBA93;
color:white;
border-radius: 5px;
font-size: 17px;
position: relative;
top:-8px;
}
::-webkit-input-placeholder {
color:#d9d9d9;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.form-footer {
clear:both;
}
/*---------------------------------------*/
/* Form Footer */
/*---------------------------------------*/
.signup-form .form-footer {
background-color: #EFF0F1;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px 40px;
text-align: right;
border-top: 1px solid #cccccc;
}
.form-footer span {
float:left;
margin-top: 10px;
color:#999;
font-style: italic;
font-weight: thin;
}
.btn {
display:inline-block;
padding:10px 20px;
background-color: #1BBA93;
font-size:17px;
border:none;
border-radius:5px;
color:#bcf5e7;
cursor:pointer;
}
.btn:hover {
background-color: #169c7b;
color:white;
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.form-header {
position: -webkit-sticky;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="form-header">
<h1>Sticky Header</h1>
</div>
<div class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum et modi explicabo porro laboriosam
reprehenderit facere natus ipsa iure. Consequatur, minima? Cupiditate facere tempora molestias earum
praesentium consectetur quae consequuntur?
</div>
</header>
<main class="container">
<form class="signup-form" action="/register" method="post">
<div class="form-header">
<h1>Create Account</h1>
</div>
<!-- form body -->
<div class="form-body">
<!-- Firstname and Lastname -->
<div class="horizontal-group">
<div class="form-group left">
<label for="firstname" class="label-title">First name *</label>
<input type="text" id="firstname" class="form-input" placeholder="enter your first name"
required="required" />
</div>
<div class="form-group right">
<label for="lastname" class="label-title">Last name</label>
<input type="text" id="lastname" class="form-input" placeholder="enter your last name" />
</div>
<div class="form-group">
<label for="lastname" class="label-title">age*</label>
<select class="form-input">
<option value="20-30">20-30</option>
<option value="30-40">30-40</option>
<option value="40-50">40-50</option>
</select>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email" class="label-title">Email*</label>
<input type="email" id="email" class="form-input" placeholder="enter your email"
required="required">
</div>
<!-- Passwrod and confirm password -->
<div class="horizontal-group">
<div class="form-group left">
<label for="password" class="label-title">Password *</label>
<input type="password" id="password" class="form-input" placeholder="enter your password"
required="required">
</div>
<div class="form-group right">
<label for="confirm-password" class="label-title">Confirm Password *</label>
<input type="password" class="form-input" id="confirm-password"
placeholder="enter your password again" required="required">
</div>
</div>
<!-- Gender and Hobbies -->
<div class="horizontal-group">
<div class="form-group left">
<label class="label-title">Gender:</label>
<div class="input-group">
<label for="male">
<input type="radio" name="gender" value="male" id="male"> Male</label>
<label for="female">
<input type="radio" name="gender" value="female" id="female"> Female</label>
</div>
</div>
<div class="form-group right">
<label class="label-title">Hobbies</label>
<div>
<label>
<input type="checkbox" value="Web">Music</label>
<label>
<input type="checkbox" value="iOS">Sports</label>
<label>
<input type="checkbox" value="Andriod">Travel</label>
<label>
<input type="checkbox" value="Game">Movies</label>
</div>
</div>
</div>
<!-- Source of Income and Income Amount -->
</div>
<div class="form-footer">
<span>* required</span>
<button type="submit" class="btn">Create</button>
</div>
<div class="form-header">
</div>
<div class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam veniam tempora, sit exercitationem
voluptatum cupiditate odio aut iste deleniti inventore iure delectus ipsa eligendi rem minima beatae
molestias ullam corporis.
</div>
</form>
</main>
</body>
</html>