Grow your CSS skills. Land your dream job.

Modal background not covering page on Android

  • # January 23, 2013 at 5:44 am

    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

    # January 23, 2013 at 5:51 am

    Perhaps providing us with link might be useful?

    # January 23, 2013 at 5:52 am

    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

    # January 23, 2013 at 6:06 am

    @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.

    # January 23, 2013 at 6:11 am

    >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.

    # January 23, 2013 at 10:06 am

    @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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".