Placeholder attribute on text input with iOS 6 fro

2020-07-10 07:12发布

站内问答 / 前端开发
441 4 6

I have a problem after updating to iOS 6 that is driving me nuts.

It looks like any time I have the attribute "placeholder" on an input field, while rotating from Portrait to Landscape and back to Portrait again the page shifts some pixels on the left side causing a horizontal bar.

I concluded after long research that it has to be something related to the meta viewport because every time I use the content="width=device-width" all works fine.

P.S Yes I really need to have a percent width on the input so as to have liquid design:)

Here is the example to recreate the issue. Thanks...

<html>
<head>
    <title>test</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
</head>
<body>

    <div style="width:100%;background-color:red">
        <input id="testInput"  placeholder="test" style="width:90%;" />
    </div>
</body>
</html>

4条回答
Emotional °昔
2楼-- · 2020-07-10 07:46

CSS fix:

body>div {
    overflow-y: auto;
}
查看更多
0人赞 添加讨论(0) 举报
放我归山
3楼-- · 2020-07-10 07:47

Non js answer

Add overflow:hidden to parent element and it will work like a charm

查看更多
0人赞 添加讨论(0) 举报
Anthone
4楼-- · 2020-07-10 08:10

I found this problem. and fix it.

(URL : http://mooki83.tistory.com/2656550 (in korean))

testURL : http://mooki83.da.to/m/testios6.html

javascript :

/* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */


$(document).ready(function(){
    $(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput);
});

function fm_optimizeInput(){
    $("input[placeholder],textarea[placeholder]").each(function(){
        var tmpText = $(this).attr("placeholder");
        if ( tmpText != "" ) {
            $(this).attr("placeholder", "").attr("placeholder", tmpText);
        }
    })
}
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
5楼-- · 2020-07-10 08:13

Applying "overflow: hidden;" on the containing element solved this issue for me.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)