HTML:blur将固定项目打到了不合适的位置

我有一个固定的元素，应该在屏幕中央。我里面也有输入元素。正如它应该做的那样，当输入被关注时，带有固定元素的整个页面就会移动

但是，如果用户点击“Go”键或我创建的一个按钮，该按钮隐藏了整个固定元素并模糊了输入，那么下次我尝试显示固定元素时，它仍然不合适（页面恢复正常）。它显示从屏幕底部滑出一半的画面（即使没有输入被聚焦，键盘也已放下）

任何帮助都将不胜感激。我一直在为这件事发牢骚。这显示在PhoneGap项目中，但我已经使用通过Mobile Safari查看的标准网站复制了该问题

下面是我的一些代码：

<!--(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');
}

显示
拯救
... 
/*（CSS）*/
#流行蛋白{
位置：固定；
左：50%；
最高：50%；
高度：400px；
宽度：300px；
顶部边距：-200px；/*使其完全居中*/
左边距：-150px；/*使其完全居中*/
} 
#平滑按钮{
/*使div看起来像一个很酷的按钮*/
}
...
//（JavaScript）
函数show（）{
$（“#popin”）.css（'display'，'block'）；
}
函数save（）{
//保存文本的代码
$（“#popin”）.css（'display'，'none'）；
}

右侧栏上的一个“相关”链接将我带到了这个页面：

我只是把答案改了一点，效果很好。现在，调整实体大小，然后在输入模糊后将其移回原位，可以更新固定元素的位置

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

右侧边栏上的一个“相关”链接将我带到了这个页面：

我只是把答案改了一点，效果很好。现在，调整实体大小，然后在输入模糊后将其移回原位，可以更新固定元素的位置

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

---

这是移动Safari或其他地方的问题吗？抱歉。添加了详细信息。谢谢你发布你的代码？这是移动Safari或其他地方的问题吗？对不起。添加了详细信息。谢谢你发代码？