CODEWITHSUNDEEP
htmlioscss
naterudd
naterudd

Reputation: 225

iPhone Safari scrolling beyond html tag

I have been working on my school's mobile site and I seem to be having a problem with scrolling in mobile Safari. If you visit www.caj.or.jp on your iPhone it will scroll past the bottom of the page and occasionally hide some of the page content under the blue background. Using the Safari inspector it seems I am scrolling past the <html> tags. But this is when the Safari scroll bar is appearing. The scroll bar isn't flashing when scrolling above, only when going past the end of the page. Any help would be appreciated.

Upvotes: 4

Views: 3330

Answers (1)

Xavier
Xavier

Reputation: 441

The quick solution to your problem is to add this CSS :

body {
    position:relative;
}

I can explain "what" is happening, but it seems to be a really particular situation and my explanation of "why" it is happening may not be exact. Hopefully someone might be able to explain it or correct me in the comments.

So "what" is happening ?

First, it can be easier to understand what is going on with this screenshot taken on Windows, since the scrollbars are always visible. You see that the window has a scrollbar, and inside it is another element with a scrollbar. That inner element is indeed <html>, because it has a height: 100% (just like <body>). So, as you said, there is something "below" that adds a scrollbar to the window.

Browser preview which shows the two scrollbars

This rebel element is <div class="ma-container">. It is at the bottom of the page, below the content of <html>. It has a position: absolute but doesn't have any box offset (top, left, bottom or right property). When an element doesn't have any box offset, the browser will position it where it would be if it had a position: static (the default positioning), but it will still be removed from the normal flow of the page.

What is important is that it will be positioned in regard to its nearest "position block", i.e. the first parent which have a position value other than static. If no parent is a positioned block, then the "initial containing block" (see it like the super parent of the <html>) will be the positioned block.

So if we sum up what is happening in your situation : since .ma-container has an absolute position but doesn't have a box offset (top, left, ...), the browser determines where the element would be if it had a position: static and then positions it "relatively" to the "initial containing block". In that case, the div should be 1298 pixels from the top of the "initial containing block". So the browser positions it there, which ends up being below the since this element has then a shortened height of 100%.

So to fix your problem, just make the <body> a positioned element and the div will be positioned inside the scrolling <body>.

I hope this helps you somehow.

(Just for additionnal information, see this article to understand exactly why html and body have a scrollbar, like if they had an implicit overflow-y: auto : CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue )

Upvotes: 3

Related Questions