Question

I’ve created a simple div overlay with the following CSS:

position:absolute;
top:0;
left:0;
display:none;
cursor:default;
z-index:101;
width:100%;
height:100%;

jQuery is used to fade it in.
All works great on all browsers, but when viewing it on mobile devices the div isn’t 100% tall. I’ve also tried the following:

Setting the div’s dimensions to screen.width and screen.height... same results

Adding the <meta name="viewport" content="width=device-width,initial-scale=1" />
tag to the index … which screwed a ton of stuff up and made the overlay about 25% width of the phone….

I’ve never run into an issue like this before and can’t seem to see any problems with the CSS.
Any ideas?

Answer 1

Try changing position:absolute to position:fixed.

position:fixed;
top:0;
left:0;
bottom:0;
right:0;
opacity:.5;
cursor:default;
z-index:101;
width:100%;
height:100%;