選択要素を使用したSafariでのwebkit-transformの問題

ipad用のwebappを開発していて、webkit-transformでdivを移動するときにselectオプション要素を使用して問題を見つけました。テーブルレイアウトを許しても、私はできるだけアプリの問題を再現しようとしています。選択要素を使用したSafariでの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>

出典

2011-02-07 Paul

Safariはあなたが見る場合選択ボックスは、ビューの外に部分的にあります時に役に立つことしようとします： - -webkit変換

http://jsfiddle.net/H5J27/

は、最初の例がありませんが、ときにそれをクリックすると、それを完全に明らかにするために移動されます。

Safariは、いったん変換されると、選択ボックスが完全に表示されていることに気づいていないようです。エンジンはまだそれが部分的に妨げられていると思って、それは選択ボックスを移動し、親コンテナを見ることができると思うところに移動します。

回避策はあまりお勧めできません。私はあなたがハードウェアアクセラレーションの利点を楽しむためにアニメーションと結合していると思いますので、イベントリスナーとアニメーションの終わりを追加し、CSS変換を取り除き、通常の配置を適用します。これはいくつかの要素でそれをやらなければならない場合には複雑になりますが、一度のことで十分です。

出典

2011-02-08 01:00:04 Duopixel

ありがとう、私はそれを行って、あなたに知らせる – Paul

はい、答えのようです。面倒な作業は回避策ですが、それは回避策です。 – Paul

選択要素を使用したSafariでのwebkit-transformの問題

答えて

関連する問題