Menu
I have a weird bug on iPad iOS7 landscape mode.
What i was able to investigate is that in iOS7 window.outerHeight is 692px and window.innerHeight 672px; while in previous versions both values are 672px.
Even though my <html> and <body> tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae
You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.
Even when i set the height of both tags to height: 672px !important and position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).
I'm running the release candidate version of iOS7
thanks for any help.
372
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
It just means 100% of the div or class or tag it is enclosed within.
I used this JavaScript solution for solving that problem:
if ( navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && window.innerHeight != document.documentElement.clientHeight ) { var fixViewportHeight = function() { document.documentElement.style.height = window.innerHeight + "px"; if (document.body.scrollTop !== 0) { window.scrollTo(0, 0); } }; window.addEventListener("scroll", fixViewportHeight, false); window.addEventListener("orientationchange", fixViewportHeight, false); fixViewportHeight(); document.body.style.webkitTransform = "translate3d(0,0,0)"; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
