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

Asked 25/9, 2012 at 12:16 Answered 19/6, 2013 at 6:38

Solved html ios6 landscape viewport placeholder

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>

Whitehorse answered 25/9, 2012 at 12:16 Comment(2)

It pains me that it took almost 3 days to find that the placeholder was the issue causing this pixel shift. Is this bug documented anywhere on apples site? – Hedonism 2/10, 2012 at 1:13

Hello Abadaba, as far as I know it is NOT documented. I just reported here to save some people's time... – Whitehorse 2/10, 2012 at 11:41

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

Amaryl answered 28/9, 2012 at 1:47 Comment(2)

would love to see a non-js fix – Hedonism 2/10, 2012 at 1:15

That is a valid answer. Thanks for that. – Whitehorse 2/10, 2012 at 11:41

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

Psychosomatic answered 1/12, 2012 at 4:6 Comment(0)

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

Amaryl answered 28/9, 2012 at 1:47 Comment(2)

would love to see a non-js fix – Hedonism 2/10, 2012 at 1:15

That is a valid answer. Thanks for that. – Whitehorse 2/10, 2012 at 11:41

CSS fix:

body>div {
    overflow-y: auto;
}

Swaine answered 14/11, 2012 at 14:36 Comment(0)

Non js answer

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

Surgical answered 19/6, 2013 at 6:38 Comment(0)

Recommended topics

Hot tags