Safari in ios8 is scrolling screen when fixed elements get focus

Question

In IOS8 Safari there is a new bug with position fixed.

If you focus a textarea that is in a fixed panel, safari will scroll you to the bottom of the page.

T

Answer 1

A possible solution would be to replace the input field.

• Monitor click events on a div
• focus a hidden input field to render the keyboard
• replicate the content of the hidden input field into the fake input field

function focus() {
  $('#hiddeninput').focus();
}

$(document.body).load(focus);

$('.fakeinput').bind("click",function() {
    focus();
});

$("#hiddeninput").bind("keyup blur", function (){
  $('.fakeinput .placeholder').html(this.value);
});

#hiddeninput {
  position:fixed;
  top:0;left:-100vw;
  opacity:0;
  height:0px;
  width:0;
}
#hiddeninput:focus{
  outline:none;
}
.fakeinput {
  width:80vw;
  margin:15px auto;
  height:38px;
  border:1px solid #000;
  color:#000;
  font-size:18px;
  padding:12px 15px 10px;
  display:block;
  overflow:hidden;
}
.placeholder {
  opacity:0.6;
  vertical-align:middle;
}

    First Name
 

---

codepen