web-dev-qa-db-ja.com

モバイルサファリの位置：スクロール時のz-indexグリッチを修正

私はiPhoneがposition：fixedをnotサポートしていたことを知っていますが、現在はそうです。低いz-indexの固定位置要素が一時的に前面に表示されますが、これは本当に見た目が悪いです。これを防ぐ方法はありますか？

-webkit-transform: translate3d(0, 0, 0);を固定要素に追加しようとしましたが、この問題を解決できないようです。

こちらもjsfiddleです。

更新 z-indexに加えてtransform:translateZ(x)を追加しましたが、問題は修正されませんでした。

pdate2-webkitプレフィックスを追加しました。これにより、モバイルSafariのz-index問題が修正されますが、デスクトップChromeでposition：fixedが正しく動作しません。

iosiphonecssmobile-safari
32
emersonthis

このフィドルに示すように、z-indexはposition：fixedでは信頼できません： http://jsfiddle.net/mZMkE/2/ 代わりにtranslateZ変換を使用します。

transform:translateZ(1px);

ページ要素に。

編集：あなたのコードで、このCSSを追加します：

.bla, .projects, .contact  {
      -webkit-transform:translateZ(1px);
      -moz-transform:translateZ(1px);
      -o-transform:translateZ(1px);
      transform:translateZ(1px);
}

そして、それらの要素と.introからz-index refを削除します。

36
tnt-rox

更新1： _z-index_に加えてtransform:translateZ(x)を追加しましたが、問題は修正されませんでした。

更新2：プレフィックス_-webkit-_を追加しました。これにより、モバイルSafariのz-index問題が修正されますが、デスクトップChromeで_position:fixed_が正しく動作しません。 "

次に、-webkit-transform:translateZ(x)をモバイル固有のメディアクエリでラップしてみます。
例えば：

_@media only screen and (min-device-width : ... ) and (max-device-width : ... ) {
    .whatever {
        -webkit-transform: translateZ(x)
    }
}
_

この場合、デスクトップChromeでは何もしません

5
Barna Tekse

異なるレイヤーのスタックで異なる位置を設定する必要がある特定のケースで答えとして受け入れられたソリューションを試しましたが、それだけではデスクトップブラウザ（firefoxとchrome）とSafari iOSの両方で機能しませんでした

私は、各divに対してtranslateZとz-indexの両方を使用し、これらのプラットフォームで機能するこのハックを思いつきました。 translateZとz-indexの順序は重要です。各レイヤーの位置を設定するには

-webkit-transform:translateZ(1px);
-moz-transform:translateZ(1px);
-o-transform:translateZ(1px);
transform:translateZ(1px);
position: relative; 
z-index: 1;

一貫性のために、z-indexとtranslateZに同じ値を使用しましたが、これは必要ありません。作業例を参照してください http://jsbin.com/peyehufo/5

2
cagnarrogna

私はこの解決策を支持していませんが、現時点で最高です...

IPhoneの位置を固定してz-indexの効果を再現するには、2つのテクニックを同時に必要とするようです：

  1. 上記の@tntで示唆されているように、z-indexを使用してモバイルサファリがスタックの順序を正しく処理するように、transform:translateZ(n)を使用します。これには、position：fixedが機能しなくなるという不幸な副作用があるようです...

  2. Position：fixedの代わりに、javascriptテクニック this like を使用して偽造します。

私はこれを徹底的にテストしていません（私はそれをするつもりはないので）が、それはかなりうまくいくようです。 「固定」要素は少し途切れているように見えますが。

2
emersonthis