over riding the bottom and top touch area on ios7 safari - landscape

Question

I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just comes out of the full screen view and triggers browser options.

1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)

2.This is the second image where we can see upon clicking "what is twitter" we get this view

Is there any possible way we could over ride that tap?

Answer 1

I think I may have found an answer, but can't confirm when switching between Portrait and Landscape. Setting your content to have the following styles:

• height: 100% (allows content to fill the viewport and go beyond the bottom)
• overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!