2

Why does the following markup result in body having an 8px margin on iOS (latest iPad) (and hence a vertical scrollbar)?

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body style="margin: 0px !important;">
  </body>
</html>

Online here: http://limitless-refuge-4707.herokuapp.com/index3

iOS 7.0.4

Edit:

Using the iPad web inspector I can see that the iOS Safari user-agent stylesheet style for a margin-top: 8px on the body is overriding my own styles. Why might this be?

Ben Aston
  • 53,718
  • 65
  • 205
  • 331
  • add in css this: `* {margin: 0; padding: 0; border: 0;}` –  Mar 02 '14 at 12:18
  • the problem remains. Could I be missing an iOS metatag? – Ben Aston Mar 02 '14 at 12:26
  • I've found a methode to scan your file: [wernull.com](http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/) –  Mar 02 '14 at 12:53
  • I believe I can see what is causing the unwanted scrollbar - the user agent stylesheet applies an 8px margin-top despite my style on the body tag. I cannot understand why the user agent is overriding my style specification though... – Ben Aston Mar 02 '14 at 13:48
  • Well, try this one out: [Width for Mobile Browser](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag), i really hope this block the problem you got. `` –  Mar 02 '14 at 15:11
  • This does not appear to fix things. I am updating my version of iOS from 7.0.4. Interestingly, Chrome for iOS does not exhibit this behavior. – Ben Aston Mar 02 '14 at 15:56

2 Answers2

0

Try setting the html element to have 100% height aswell

CosmicChild
  • 181
  • 8
0

This appears to be a bug in Safari on iPad with iOS7. It remains in 7.0.6.

iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue

Community
  • 1
  • 1
Ben Aston
  • 53,718
  • 65
  • 205
  • 331