Mobile: Input fields are not auto scrolled on touch
franktroia opened this issue · comments
Since snap-content is absolutely positioned, browsers are unable to automatically scroll the input field towards the top of the screen to avoid the soft keyboard hiding the input field.
Has anyone solved this?
So removing the overflow properties from html, body, and .snap-content allows mobile browsers to automatically scroll to the touched input.
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
/*overflow: hidden;*/
}
.snap-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
z-index: 2;
/*overflow: auto;*/
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Of course, that causes an issue with the drawers not stretching to the bottom of the .snap-content. I haven't been able to figure that out yet.