20

http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.movのビデオを見ると、実際に問題が発生していることがわかります。基本的に、私は次のようなものを持っています:

<section id="sidenav">
  <h1>TEXT HERE</h1>
  <ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li>Tab Four</li>
  </ul>
  <div id="tab"></div>
</section>

Sidenav は次のように絶対配置されます。

#sidenav {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 770px;
  padding: 30px 0px 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-transition: left 0.75s ease-in-out;
  -webkit-backface-visibility: hidden;
  z-index: 10; /* This fixed it. */
}

#sidenav.hidden {
  left: -768px;
}

私は次のjQueryを持っています:

$("#tab").click(function(){
  $("#sidenav").toggleClass("hidden");
});

ただし、セクション内の要素がアニメーションに追いついていません。クリックするたびに、遅れるか、まったく動かなくなります。しかし、それらはただの幽霊なので、クリックすることはできません。サイド ナビを元に戻すと、通常は追いつきますが、 にカーソルを合わせるまで壊れることがあり<li>ます。

これはデスクトップの Safari/Chrome でのみ発生することに注意してください。iPad の Safari とデスクトップの Firefox は問題なく動作しています。

ありがとう！アンドリュー

修正して編集:

そのため、明らかに z-index: 10 (または任意の z-index) を sidenav 要素に追加すると、問題が修正されました。何人かが私のCSS全体を求めていたので、それを含むように投稿を編集しました. z-index がこれを修正した理由が正確にはわかりません。理由を知りたいです。私はまだそれを説明できる人に賞金を提供しています。ありがとう！

4

5 に答える 5

1

これをコメントとして投稿したいのですが、私はここでは初心者なので、これを回答として投稿するしかありません。ビデオの例では、矢印の表示が許可されているリスト要素にホバーを投稿しましたが、マウスアウトしても消えませんでした。これを css だけで実行しようとしていて、潜像がない場合は、hover を使用する必要があります。

これについては、次の投稿で詳しく説明してい ます。

そうすれば、マウスがリスト要素を離れるときに矢印を非表示にすると、リストがページから左にスライドしたときに矢印が残ることはありません。

于 2012-05-14T06:29:31.410 に答える
1

あなたが与えたマークアップから、クラス "hidden" もあなたの 'nav' div を取るように見えます (それは sidenav の中にあります) - それはいくつかの風変わりな原因になると思います

経験則として

  • コンテンツをマークアップする
  • スタイルアップ
  • インタラクションを追加します (クリックイベントと動作)
  • 次に、最終的なインタラクション キャンディーを追加します (イージングなど)

（これを行うと、UIで問題を引き起こしている部分を特定する必要があります）

于 2012-05-15T23:42:03.197 に答える
1

時々これはうまくいきます: 親position:relativeを webkit の古い ie haslayout バグのバージョンのようにします。

于 2012-05-15T23:54:58.703 に答える
0

親から z-index スタイルを削除し、固定要素に 0 より大きい z-index を与えることで修正しました。これが他の人とうまくいくことを願っています。

于 2013-04-12T11:53:18.907 に答える