mobile Safari: prevent scroll page when focus on input

I'm trying to prevent scroll page when user tap on input:

<pre class="js-parent">
  <input value="tap to focuss" readonly>
</pre>

$("input").on("focus", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

$("input").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
  this.setSelectionRange(0, 9999);
});

Few problems:

1) when user click on input page scroll to element (to the top of the page)

2) when focus is active, parent block lose position: fixed

demo

demo with code