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 may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:

• overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

in addition to your height: 100% (which forces the content to fill the viewport)

appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.

Answer 2

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.

Answer 3

I know this question is a bit old, but since the issue still exists I thought I should share my experience...

As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.

So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!

Another workaround would be to simply make the button/bar float 44px from the bottom.

"If it's stupid, but it works... it ain't stupid..." ;)