Niki Sehmi Niki Sehmi -4 years ago 90
CSS Question

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

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'.

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 Source

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.

navigation elements


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download