1

clipCSSとclip-pathプロパティを使用して、単一ページの Web サイト レイアウトのフローティング ページャー ナビゲーションを表示しようとしています。背景が暗いか明るいかに基づいて、ナビゲーションの色を変更しようとしています。http://dannymcgee.net/redesignで、意図した結果を Firefox で確認できます。また、トラブルシューティングの目的で、 http: //dannymcgee.net/dev/clipnav-prototype/ で、ナビゲーションとコンテナーをよりクリーンで軽量なコードで複製しました。

これは、異なる背景色を持つ各セクションのマークアップの構造です。

<section>

  <div class="clipper">
    <ul class="nav">
      ...
    </ul>
  </div>

  <article class="content">
    ...
  </article>

</section>

section背景が変わるたびにこの全体が繰り返されます。それぞれsectionが相対的に配置されています。は次の.clipperようにスタイル設定されています。

position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);

クリッパーの.nav内側はposition: fixed、ページの上部からあり、 がありますbackface-visibility: hidden。

この効果は基本的に Firefox で希望どおりに動作しますが、Chrome と IE ではバグがあります。Chrome では、背景画像が奇妙に動作し、ナビゲーションは最初のセクションを過ぎると操作できなくなります。IE では、ナビゲーションは最初のセクションを過ぎてまったく表示されません。私はこれとまったく同じ設定が Chrome と IE で正しく動作しているのを見てきました(実際、私はコメントできない古い StackOverflow スレッドのリンクを見つけました)。彼らは違ったやり方をしています。何らかの shim Javascript または jQuery ソリューションを見つけることができれば、それを使用してかなり満足できますが、これは非常に珍しいケースのシナリオのようで、どこから調べればよいかさえわかりません。

4

2 に答える 2

1

大規模なトラブルシューティングを行った後、問題を解決しました。基本的に、clipand/orclip-pathは Chrome と IE では非常に脆弱です。問題のほとんどは、要素を fixed 内に配置したことが原因でしたnav。position内のすべての宣言をすべて削除.navすると、Chrome でほぼ意図したとおりに機能しました。IE はおそらく失われた原因なので、IE のフォールバックを設計する必要があります。

警告: CSS3 変換を 内の何かに適用すると、Chromeの 3 番目.clipperの機能が壊れるようです。理由はわかりませんが、Chrome でこれらの効果を無効にするのは簡単です。background-attachment: fixedsection

于 2015-04-07T19:56:31.567 に答える