Moving the styling to the html element works fine, but there are other ways of fixing this.
What's going on here is initially the body element is sized according to the viewport. If the viewport is only X pixels wide, your body will only be X pixels wide, even if the contained content is wider. To fix this, give your body (or whatever you're attaching the background stylings to) a non-percentage based width or a min-width to fit your content.
You actually get the same issue on desktop browsers by narrowing the browser window and scrolling to right. The problem is more noticeable on the iPhone/iPad because by default, Mobile Safari will set the viewport to 980px, and then zoom out until all your content fits on screen.
An alternate solution, which I wouldn't recommend because it only works for Mobile Safari is setting the viewport width yourself using:
<meta name = "viewport" content = "width = 1080">
More info at Apple's Developer Docs.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
