Menu
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>
623
Applying "overflow: hidden;" on the containing element solved this issue for me.
63
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);
}
})
}
CSS fix:
body>div {
overflow-y: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
