Modal background not covering page on Android

[Frantiq]

Hi.

I have a modal background div that opens (with a modal layer above it) when I click a link on my page. And it doesn’t cover the entire page when I on my Android phone (4.0.4) zoom in to click the link and then zooms out to see the newly added modal layer.

Steps to reproduce:
1. Zoom in and click the link
2. Now the background and the layer apperes.
3. Zoom out to see the entire layer and page.
4. The background now only covers the zoomed in area, not the entire page.

I’m not adding any CSS other than display: block; with JS to the background.
All of the positioning is done with css:
.dialog-modal {
background: rgba(255, 255, 255, 0.5);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 300;
}

What am I doing wrong?

Note: The site is not responsive and it works in all browsers (Mac/PC, with rgba support) and all iOS versions.

Thanks

[Paulie_D]

Perhaps providing us with link might be useful?

[kiddo]

hmm i’m a little lost here, you said your website isn’t responsive and yet you want to open in mobile browser ???

do you tried using
-webkit-background-size:cover

[Frantiq]

@Paulie_D sorry, it’s password protected.

@kiddo It’s not responsive but the client still wants it to work on mobile devices.
-webkit-background-size: cover; does not work.

[Paulie_D]

>sorry, it’s password protected.

Seriously, if we can’t see the code or the site then it’s unlikely we’re going to be able to help.

[Frantiq]

@Paulie_D, seriously. It’s not my little hobby project. The site belongs to a big corporation and the project is not for public viewing. I thought I’d ask here and see if someone had encountered the same problem and knew how to fix it with just css.

[Author]

Posts