HTML :blur knocking fixed items out of place

Question

I have a a fixed element that is supposed to be centered in the screen. I also have input elements inside. As it should, when the inputs are focused on, the whole page with the fixed element moves around.

However, if the user hits the "Go" key or a button that I created which hides the whole fixed element and blurs the input, the next time I try to show the fixed element, it is still out of place (the page is back to normal). It shows slid halfway off the bottom of the screen (even though no input is focused and the keyboard is down).

Any help would be appreciated. I have been pulling my hair out about this. This is showing up in a PhoneGap project but I have replicated the issue using a standard website viewed through Mobile Safari.

Here is a bit of my code:

<!--(HTML)-->

<div class="smooth-button" onclick="show()">Show</div>

<div id="popin">
<input type="text" placeholder="Example!" />
<div class="smooth-button" onclick="save()">Save</div>
</div>

... 


/* (CSS) */

#popin {
    position: fixed;
    left: 50%;
    top: 50%;
    height: 400px;
    width: 300px;
    margin-top: -200px;  /*keeps it perfectly centered*/
    margin-left: -150px; /*keeps it perfectly centered*/
} 

#smooth-button {
    /* make the div look like a cool button */
}

...

// (JavaScript)

function show() {
    $("#popin").css('display', 'block');
}

function save() {
    //code to save text
    $("#popin").css('display', 'none');
}

Is this a problem in Mobile Safari or elsewhere? – Mooseman Feb 17 '13 at 23:42 — Mooseman, Feb 17 '13 at 23:42

score 1 · Accepted Answer · edited May 23 '17 at 10:32

One of the "Related" links on the right sidebar led me to this page:

iOS 5 fixed positioning and virtual keyboard

I just changed the answer a bit and it works perfectly. Now, resizing the body and then moving it right back after the inputs are blurred makes the position of the fixed element update.

$("input, textarea").live("blur", function(e) {
    setTimeout(function() {
        $("body").css("height", "+=1").css("height", "-=1");
    }, 0);
});

HTML :blur knocking fixed items out of place

1 Answers1