使用选择元素在safari上进行webkit转换的问题 [英] webkit-transform issue on safari using select elements
问题描述
我正在为ipad开发一个webapp，并在通过webkit-transform移动div时遇到了使用选择选项元素的问题.请原谅表的布局，但我正尝试尽可能在应用程序中复制该问题.
I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
单击绿色框，面板将向左移动，并且选择框很好.重新加载页面，然后单击红色框，面板将移至左侧(使用webkit-transform)，然后单击选择框，该列表将显示在浏览器外部，并且容器框会跳转.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
请注意，在最新的GA chrome版本中这不是问题.
Note that this is not an issue on the latest GA chrome builds.
<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尝试是有帮助的，当有一个选择框部分离视图，如果看到:
Safari tries to be helpful when there's a select box partially out of view, if you see:
第一个示例没有-webkit-transform，但是当您单击它时，它将被置换以完全显示它.
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
现在，Safari显然不知道转换后的选择框处于全屏状态.引擎仍然认为它被部分阻塞，它将选择框和它的父容器移动到认为可以看到的位置.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
解决方法不是很令人鼓舞.我猜想您正在与动画一起执行此操作，以便享受硬件加速的好处，因此我将添加一个事件侦听器和动画的结尾，删除css变换并应用常规定位.如果必须在多个元素上进行操作，这将变得很复杂，但是对于一次操作来说已经足够了.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.
这篇关于使用选择元素在safari上进行webkit转换的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
