Unwanted padding at bottom of page when input focussed on mobile safari

Question

I\'m working with textareas on mobile safari and when a textarea is focussed the viewport seems to add padding underneath the document. When inspecting and selecting the area, i

Answer 1

I don't think this is solvable with CSS, it seems to be Safari chrome.

When I test it on an actual device (6+) the space at the bottom is white. I played with some :focus styles with positioning, and found I was only cutting off the container.

#textarea:focus {
  border-bottom: 14px solid red;
  bottom: -6px; //shows 1px of border
  //bottom: -7px; //shows no border
}

You can play here. http://codepen.io/ArleyM/pen/NGmbWW?editors=110

As far as a solution goes this is a design problem, I wonder if there's a way that you can use this white space to your advantage. Users will be focussed on what they're entering, you can make this look good :)