проблема webkit-transform в сафари с использованием элементов select - PullRequest
Новая
       43

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

1 голос
/ 07 февраля 2011

Я разрабатываю веб-приложение для ipad и столкнулся с проблемой использования элементов option select при перемещении 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>

1 Ответ

3 голосов
/ 08 февраля 2011

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

http://jsfiddle.net/H5J27/

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

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

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

...