IPhone Safari scrolls outside of html tag
I am working on my mobile site at school and I seem to have a scrolling problem on mobile Safari. If you visit www.caj.or.jp on your iPhone, it will scroll to the bottom of the page and sometimes hide some of the page content under a blue background. Using the Safari inspector I seem to be scrolling through the tags <html>
. But this happens when the Safari scrollbar appears. The scroll bar does not flash when scrolling up, only when passing the end of the page. Any help would be appreciated.
source to share
A quick fix to your problem is to add this CSS:
body {
position:relative;
}
I can explain "what" is happening, but it seems like this is indeed a special situation, and my explanation of "why" is not entirely accurate. Hopefully someone can explain this or correct me in the comments.
So what is going on?
First, it might be easier to understand what's going on with this screenshot taken in Windows, since the scrollbars are always visible. You can see that there is a scroll bar in the window, and inside there is another element with a scroll bar. This inner element is valid <html>
because it has height: 100%
(just like <body>
). So, as you said, there is something "below" that adds a scrollbar to the window.
This element of rebellion <div class="ma-container">
. It's at the bottom of the page, below the content <html>
. It has position: absolute
, but does not have any margin offset (top, left, bottom, or right property). When an element does not have a margin offset, the browser will position: static
position it where it would if it had (default positioning), but it will still be removed from the normal page flow.
What matters is that it will be placed in relation to its closest "position block", that is, the first parent that has a different position value than the static one. If no parent element is a positioned block, then the "initial containing block" (see It as a superuser element <html>
) will be the positioned block.
So, if we summarize what's going on in your situation: since it .ma-container
has an absolute position but no window offset (top, left, ...), the browser determines where the element it had position: static
and then positioned it relative to the "start containing block ". In this case, the div should be 1298 pixels from the top of the "initial containing block". Thus, the browser positions it there, which is lower, since this element has a reduced height of 100%.
So, to fix your problem, just make a <body>
positioned element and the div will be placed in scroll <body>
.
Hope this helps you.
(Just for more information, see this article to understand exactly why html
and body
have a scrollbar, for example if they have an implicit overflow-y: auto
: CSS-x: visible and overflow-y: hidden causing a scrolling issue )
source to share