Issue
I've configured a full screen background image with CSS like this:
html {
background: url(image url) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
When I first open the site in a mobile browser it looks great. However, if I select a form input and the mobile keyboard pops open then the background image resizes to match the height of the view that's above the keyboard.
Is there any way to keep the height of the background image static when the mobile keyboard opens? CSS only solutions are preferred.
Solution
Here's one way to achieve this with CSS variables. First add this to your <head>:
<script>document.documentElement.style.setProperty('--original-viewport-height', window.innerHeight+"px")</script>
Now you can set the min-height of your background element to var(--original-viewport-height).
Here's an example of the code that I'm using:
body {
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
background-image: url(img.png);
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
min-height: var(--original-viewport-height);
left: 0;
top: 0;
will-change: transform;
z-index: -1;
}
(As you can see, in my specific case the background is on the ::before rather than directly on the body to solve the jittery scrolling issue with fixed backgrounds in Android Chrome.)
Answered By - joe
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.