webkit-transform issue on safari using select elements

问题

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.

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.

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>

回答1:

Safari tries to be helpful when there's a select box partially out of view, if you see:

http://jsfiddle.net/H5J27/

The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.

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.

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.

来源：https://stackoverflow.com/questions/4920327/webkit-transform-issue-on-safari-using-select-elements

标签

select

safari

webkit

transform