iPad Safari 100% height issue

Question

I have a modal div on my page, which grays out the background. If I set the height of overlay div to 100%, it works fine on IE (desktop), but on iPad Safari, the complete height is not grayed out. What exactly is the issue? Is it to do with fixed position/viewport? Please help. Below is the CSS for the same;

#TB_overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.TB_overlayBG {
    background-color: #000000;
    opacity: 0.4;
}

Check my answer to similar question, might help a little http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems — Dmitry Semenov, Mar 30 '13 at 11:43

score 5 · Accepted Answer · answered Apr 20 '11 at 11:42

5

Hi the easiest way and that's how I do it is to give maximum height width to the overlay. Like:

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

You can put this at the bottom i.e. before body tag and change its display to block whenever you want to gray out the background. Obviously whatever you want to show on top of it must have a greater z-index. Hope this helps. Let me know if you don't understand.

answered Apr 20 '11 at 11:42

Naveed Ahmad

3,176
1
15
18

Will this work fine both for desktop as well as iPad and will it not create a big scrollbar, as we are using a large height.. – copenndthagen Apr 20 '11 at 11:48
It works and won't create a scrollbar as the position is fixed. You can give a try. – Naveed Ahmad Apr 20 '11 at 11:51
Do I need to use position: fixed; OR position:absolute; for the overlay div? – copenndthagen Apr 20 '11 at 12:01
This overlay div has to be `fixed` positioned. But the modal div on top of it could be absolute. – Naveed Ahmad Apr 20 '11 at 12:02

score 2 · Answer 2 · answered Apr 20 '11 at 11:37

2

The device height and width need to be set, you can use iPad specific styles to achieve this, so that it doesn't break your other browsers.

Reference: http://css-tricks.com/snippets/css/ipad-specific-css/

Without seeing the it, its hard to say exactly what the problem is but try using the above css to apply specific css to iPad Safari.

answered Apr 20 '11 at 11:37

Dave Harding

481
1
4
19

2

Even with all dimensions set, it's very hard to determine and query heights and widths in mobile browsers, due to the viewport. Viewport is not the same as window size on a 'normal' (desktop) browser. That's why `position: fixed;` doesn't work as expected on mobile browsers. – Rudie Apr 20 '11 at 11:41
@Rudie, +1. Quite a bit of math is required. In iOS, we also have the problem of different dpi's (iPhone4 is higher). In Android browsers, we can read the dpi figures and do the math there. – Stephen Chung Apr 20 '11 at 11:51
So you are essentially saying that determining the device-height dynamically and accordingly setting the height for the overlay div is not going to be possible? is there any other way? – copenndthagen Apr 20 '11 at 13:15

score 0 · Answer 3 · answered Apr 20 '11 at 11:48

Your issues:

Most mobile browsers ignore position:fixed
Window sizes and viewport sizes are handled differently, so the position:absolute;... trick doesn't work also -- you have to dynamically size your div in script by reading the size of the viewport, or make it large enough to cover all potential page sizes

iPad Safari 100% height issue

3 Answers3

Linked