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.
Asked
Active
Viewed 2,457 times
4
naterudd
- 235
- 2
- 8
-
Why don't you remove the property `overflow-x: hidden;` from `html` tag? – Caio Tarifa Jul 20 '15 at 02:10
-
Thank you, that is the cause. Now, I'll have to find another way to keep them from scrolling sideways, or I'll just have to allow it. EDIT: it looks like putting `overflow-x:hidden` on my `#pageContainer` div will do the trick. – naterudd Jul 20 '15 at 03:21
1 Answers
3
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.
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 )
-
Thank you very much @Xavier. Your thorough explanation was very helpful. After the help from @CaioTarifa and I removed `overflow-x: hidden` from the `html` tag, I was still slightly disappointed that the scroll bar still wasn't showing up. Adding `position: relative` to the `body` tag now brings the scroll bar back. I had not been pleased with the `.ma-container` addition to our page after we had purchased our search engine, and this improves that situation for me. I have left `.ma-container` without an offset for now. Thanks again for all your help. – naterudd Jul 21 '15 at 05:06