4

ページのスクロール時に CSS3 アニメーションが固定位置を壊すことに続いて、テスト ケース(Webkit のみ)を作成しました。コードは以下にもコピーされます。

私が欲しいのは、固定ヘッダーと相対的に配置されたコンテンツです。コンテンツが相対的に配置される理由は、段落内に絶対配置される特定の要素があるためです。この例ではそれらを省略しましたが。

もちろんposition:relative、<p>（なしでz-index）に追加すると、コンテンツがヘッダーの上にスタックされますが、これは望ましくありません。つまり、CSS が

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}

テキストはヘッダーの上に表示されます。そのため、ヘッダーにa を追加しz-index:1て修正します。ただし、これは回転するイメージがヘッダーからオーバーフローする問題にはまだ対処していません。overflow:hiddenヘッダーの単純なものが機能すると思っていたでしょう。ページがスクロールされるまでのようで、固定ヘッダーもスクロールします。

z:indexとの存在のようですが、overflow:hiddenとautoレイアウトscrollも壊れていますが、その理由を知りたいですか?

z-index:1ヘッダーの代わりに を使用できますが、と CSS3 アニメーションの組み合わせが固定ヘッダーをスクロールさせる理由はまだ説明z-index:-1されていません。<p>z:indexoverflow

最後に (そしてもちろん) 恐ろしい回転アニメーションを削除すると、ヘッダーが期待どおりに修正されます。ページにそのアニメーションを表示することは決してないことに注意してください。問題を強調するためにあるだけです:-)

問題を示すコード (Webkit ブラウザーのみ)

HTML

<div id="header">
  <div id="spinner"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

body, p {
  margin:0;
}

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
  z-index:1;
  overflow:hidden;
}

#spinner {
  background:url(http://lorempixel.com/40/40/abstract/1/);
  height:44px;
  width:44px;
  margin:2px 0 0 2px;
  -webkit-animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {-webkit-transform:rotate(0deg)}
  50% {-webkit-transform:rotate(720deg)}
  100%{-webkit-transform:rotate(1440deg)}
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}
4

2 に答える 2

4

追加してみてください：

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

ページ上の固定要素に。アニメーションは、存在する必要があるパースペクティブを伝える必要があるようです。3d を 0 に設定すると、2d が暗示されます。

于 2013-05-20T13:07:22.810 に答える
1

これは確かに奇妙な動作であり、おそらく Webkit のバグですが、追加の div をネストすることで問題を解決できました。

HTML

<div id="header">
    <div id="fix">
        <div id="spinner"></div>
    </div>
</div>

CSS

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
  z-index:1;
}
#fix{
  height:100%;
  overflow:hidden;
}

このjsfiddleをチェックしてください：http://jsfiddle.net/C95nq/23/

なんらかの理由で、プロパティの組み合わせが壊れますが、overflow:hidden を独自の div に移動すると、問題が解決するようです。

于 2013-01-30T16:55:47.430 に答える