7

chrome（固定ヘッダーが完全に消える理由を理解しようとすると問題が発生します。Firefoxはそれを保持しますが、絶対位置の要素を固定要素の上に流します。不透明度：.99を使用して問題を回避しましたが、それでもそれがそれを修正するためにどのように何かをするのか私の心を壊します。

http://www.rickpascua.cu.cc/newsite-snazzy/index.html<---問題のページ。

4

5 に答える 5

4

次のCSSをdispease要素に設定します

-webkit-transform: translate3d(0, 0, 0);
transform        : translate3d(0, 0, 0);

transform属性translated3dが存在しません。translate3d実行し、同じページ上のアニメーション要素を使用した固定位置を解決する必要があります。

于 2012-09-06T10:59:52.237 に答える
3

編集：ユーザー@jacobは、これはパフォーマンスに悪影響を与える可能性のある間違ったアプローチであると指摘しています。ハードウェアアクセラレーションを強制するプロパティならどれでもうまくいきますが、このルールをグローバルに適用する代わりに、壊れた要素にのみこのルールを適用してみてください。

animate.cssをzurbによるfoundationと組み合わせたときに同様の問題が発生しました。

ライアン・ウーの答えに基づいて私が思いついた解決策

* {
backface-visibility: hidden;
}

それは私の問題のために働きました（アニメーション中にパディング/ボーダーや他の厄介なものを失う修正された要素）

于 2015-01-03T09:41:18.067 に答える
2

CSSアニメーションがレイアウトを壊している理由はまだ実際にはわかりません。私のテストでは、アニメーションを実行しているときoverflow:hidden;z-indexに、ヘッダーを使用すると、固定位置が失われていました。しかし、私には答えがあります。

まず、削除します

overflow:hidden;
visibility:visible;
z-index:99;

固定位置ヘッダー要素から<div id="header">。

ただし、これら3つのプロパティを削除して<div id="slide-contain"/>も、は重複します。これは、暗黙的なスタッキングコンテキストの階層化が原因です。CSS_absolute_and_fixed_positioning＃The_third_dimensionの記事の7つの層を参照してください。

（の子孫である）に設定されているが、その要素にはposition:relative設定されていないため、不要なオーバーラップが発生します。いくつかの子要素を絶対に内部に配置したいので、相対配置が追加されたことに気付きました。<div id="slide-contain"/><div id="wrapper"/>z-index

したがって、<div id="slide-contain"/>要素は、固定ヘッダーを含むページ上のz-indexのない、他のすべての要素と同じZ平面上にあります。両方の要素はレベル6にあります-リンクされた記事に従って、スタックレベルがautoまたは（ゼロ）に設定された位置付けられた子孫であり、スタックのデフォルトは要素がDOMに表示される順序であるため、<div id="slide-contain"/>は`の上にレンダリングされます。

したがって、z-index:1常にヘッダーを上にレンダリングするには、ヘッダーにaが必要です。0より大きくする必要があるため、次のように変更z-index:99します。z-index:1

別の解決策は、次の兄弟に負 z-indexの（および）を指定することです。position:relative<div id="wrapper"/>

にネガティブを追加するだけで十分だと思うかもしれませんがz-index、<div id="slide-contain"/>要素の祖先に複製する必要があります。そうしないと、<div id="slide-contain"/>が親の後ろにプッシュされます。

于 2012-07-20T10:53:58.617 に答える
1

このバグは、コンテナのアニメーションがGPUにオフロードされているために発生すると思います。ただし、固定位置では子孫がフローから削除されるため、コンテナと一緒にオフロードされません。そして、固定位置要素が誤って合成されます。固定位置の要素にハードウェアアクセラレーションプロパティ（ex translate3d）を追加すると、問題が「修正」されたように見えます（GPUにもオフロードされ、合成中の問題を回避できるためです）。

元

<div class="container">
  <div class="fixed"></div>
</div>

.container {
  animation-duration: 0.8s;
  animation-name: some-animation;
}

.fixed {
  /* transform: translateX(-200%); */
  transform: translate3d(-200%, 0, 0);
  position: fixed;
  top: 10rem;
}
于 2015-10-29T21:53:44.780 に答える
0 
background: url(../assets/logo.png) center no-repeat,url(../assets/header2.jpg) bottom center;
height: 50px;
width: 100%;
border-bottom: 5px solid black;
position: fixed;
text-align: center;
z-index: 99;

これを試してみてください。

ただし、float divを使用しているヘッダーdivの内部htmlにも問題があるため、overflow：hiddenまたはautoを使用する場合は、clearクラスも使用する必要があります。

于 2012-07-19T18:12:54.250 に答える