Search code examples
htmlios6landscapeviewportplaceholder

Placeholder attribute on text input with iOS 6 from landscape to portrait

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

  • 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);
        }
    })
}