Deadzone in iPhone 6 Plus, Safari, iOS8. Bottom area loses interactivity when tabs are visible

Question

I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.

The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.

I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.

bodyEl.style.height = window.innerHeight + 'px';

It may be the case that this area is not usable for interactive content.

Here is a demo with code:

http://plnkr.co/edit/327sUQ?p=preview

You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.

Update:

It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.

Answer 1

I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.

First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.

Nethertheless, I try to explain what I've found out (until we decided to not bother anymore). The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.

---

Btw.: There's another (similar) problem with the iPhone 6 plus (not fixed yet). If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.