Атрибут заполнителя при вводе текста с iOS 6 из альбомной ориентации в портретную

У меня проблема после обновления до iOS 6, которая сводит меня с ума.

Похоже, что каждый раз, когда у меня есть атрибут «заполнитель» в поле ввода, при повороте от «Портрет» к «Пейзаж» и обратно к «Портрету» страница смещается на несколько пикселей влево, вызывая горизонтальную полосу.

После долгих исследований я пришел к выводу, что это должно быть что-то связанное с мета-окном просмотра, потому что каждый раз, когда я использую content="width=device-width", все работает нормально.

P.S. Да, мне действительно нужно иметь ширину в процентах на входе, чтобы иметь жидкий дизайн :)

Вот пример воссоздания проблемы. Спасибо...

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

html placeholder landscape viewport ios6
person alexd    schedule 25.09.2012    source источник
comment
Мне больно, что потребовалось почти 3 дня, чтобы понять, что заполнитель был проблемой, вызывающей этот сдвиг пикселей. Эта ошибка задокументирована где-нибудь на сайте Apple?   -  person Abadaba    schedule 02.10.2012
comment
Привет, Абадаба, насколько я знаю, это НЕ задокументировано. Я просто сообщил здесь, чтобы сэкономить время некоторых людей...   -  person alexd    schedule 02.10.2012

Ответы (4)


arrow_upward
4
arrow_downward

Я нашел эту проблему. и исправить это.

(URL: http://mooki83.tistory.com/2656550 (на корейском))

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);
        }
    })
}
person Mooki    schedule 28.09.2012
comment
хотелось бы увидеть исправление без js - person Abadaba; 02.10.2012
comment
Это правильный ответ. Спасибо за это. - person alexd; 02.10.2012

arrow_upward
5
arrow_downward

Применение «переполнение: скрыто;» на содержащем элементе решил эту проблему для меня.

person Michael Christopherson    schedule 01.12.2012

arrow_upward
3
arrow_downward

Исправление CSS:

body>div {
    overflow-y: auto;
}
person PoseLab    schedule 14.11.2012

arrow_upward
0
arrow_downward

Ответ без js

Добавьте overflow:hidden к родительскому элементу, и он будет работать как шарм

person Gohel Kiran    schedule 19.06.2013