Question

我正在为ipad开发一个webapp，并在使用webkit-transform移动div时使用select选项元素遇到了一个问题。原谅桌面布局，但我试图尽可能地在应用程序中复制问题。

单击绿色框，面板向左移动，选择框正常。重新加载页面并单击红色框，面板向左移动（使用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>

Answer 1

如果你看到一个部分不在视图中的选择框，Safari会尝试提供帮助：

http://jsfiddle.net/H5J27/

第一个示例没有-webkit-transform，但是当您单击它时，它将被移位以便完全显示它。

现在，Safari显然不知道，一旦转换，选择框就会全部显示。引擎仍然认为它部分受阻，它会将选择框和它的父容器移动到它认为可以看到它的位置。

解决方法不是很令人鼓舞。我猜你正在做这个加上动画以享受硬件加速的好处，所以我添加一个事件监听器和动画结束，删除css转换并应用正常定位。如果你必须在几个元素上做这个会变得复杂，但这对于一次性事情来说已经足够了。

使用select元素在safari上进行webkit-transform问题

1 个答案: