I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our <a href="#">use of cookies</a></p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>