search

jakiestfu / Snap.js

A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)
http://jakiestfu.github.io/Snap.js/
5.99k stars 663 forks source link

Mobile: Input fields are not auto scrolled on touch #253

Open franktroia opened 9 years ago

franktroia commented 9 years ago

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?

franktroia commented 9 years ago

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.