デモhttp://mocheng.github.com/demo/translate3d.htmlとして Mobile Safari で有線の問題を見つけました
translate.html内に iframe としてtranslate3d_iframe.htmlというページが 1 つあります。translate3d_iframe.htmlの要素には、スタイル-webkit-transform: translate3d(0, 0, 0)があり、 3D アクセラレーションを強制します。
興味深い結果は、3D 化された要素が常に他の要素の上に表示され、z-index が低いということです。
さらに興味深いのは、3D 化された要素が他の要素の上に表示されることです。メニュー項目の「hidden by」3D 要素をタップすることもできます (タップすると警告メッセージが表示されます)。
これは Mobile Safari でのみ再現できます。
とにかくそれを回避する方法はありますか？Web 開発者は、iOS ブラウザーがこの種の問題に対処するためにどのように機能するかを知っておく必要があると感じました。