проблема webkit-transform в сафари с использованием выбранных элементов

Я разрабатываю веб-приложение для ipad и столкнулся с проблемой использования элементов выбора выбора при перемещении элементов div с помощью webkit-transform. Простите макет таблицы, но я пытаюсь воспроизвести проблему в приложении как можно точнее.

Нажмите на зеленое поле, и панели переместятся влево, и поле выбора в порядке. Перезагрузите страницу и нажмите на красное поле, и панели переместятся влево (с помощью webkit-transform), и когда вы нажмете на поле выбора, список отобразится за пределами браузера, и поле контейнера прыгнет.

Обратите внимание, что это не проблема в последних сборках GA Chrome.

<html>
<head>
    <title>Select Testing</title>
    <style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
    <script type="text/javascript">
function leftBad() {
    document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
    document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
    <div id="moveBad" class="button" onclick="leftBad();"></div>
    <div id="moveGood" class="button" onclick="leftGood()";></div>
    <div id="panelContainer">
        <div id="panels">
            <table>
                <tr>
                    <td>
                        <div id="page1" class="panel">
                        </div>
                    </td>
                    <td>
                        <div id="page2" class="panel">
                            <select>
                                <option value="volvo">
                                    Volvo
                                </option>
                                <option value="saab">
                                    Saab
                                </option>
                                <option value="mercedes">
                                    Mercedes
                                </option>
                                <option value="audi">
                                    Audi
                                </option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

safari select transform webkit
person Paul    schedule 07.02.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Safari пытается помочь, когда поле выбора частично скрыто, если вы видите:

http://jsfiddle.net/H5J27/

В первом примере нет -webkit-transform, но когда вы щелкнете по нему, он будет смещен, чтобы раскрыть его полностью.

Теперь Safari, по-видимому, не знает, что после преобразования поле выбора отображается полностью. Движок все еще считает, что он частично заблокирован, и он переместит поле выбора и его родительский контейнер в точку, где, по его мнению, вы можете его видеть.

Обходные пути не очень обнадеживают. Я предполагаю, что вы делаете это в сочетании с анимацией, чтобы воспользоваться преимуществами аппаратного ускорения, поэтому я бы добавил прослушиватель событий и конец анимации, удалил преобразование css и применил нормальное позиционирование. Это будет сложно, если вам придется делать это на нескольких элементах, но этого достаточно для одного раза.

person methodofaction    schedule 08.02.2011
comment
Спасибо, попробую и сообщу - person Paul; 08.02.2011
comment
Да, похоже, это ответ. Грязная работа, но это обходной путь. - person Paul; 10.02.2011