2

バックグラウンド：

メディアクエリと CSS3 トランジションを使用して、Web サイトのさまざまなプレゼンテーション間をスムーズに移行しようとしています。これまでのところ、すべてがうまくいっているように見えますが、垂直スクロール バーを含むプレゼンテーションと含まないプレゼンテーションの間を移行する際に問題が発生しました。メディア クエリで Web サイトの幅を変更することはかなり一般的だと思うので、Stack でこれについて何も出てこないことに驚きました。

問題

Webkit ブラウザーは、遷移の結果として垂直スクロール バーの有無が変わると、無限ループ / ちらつきに入るように見えます。これは動作のデモです..それをトリガーするには、Chrome または Safari PC で幅 700px マークの周りでウィンドウのサイズをゆっくりと変更します。

質問/試したこと

ここでの Webkit の回避策は何ですか? Firefox では問題ありません。イージングとトランジションをより速く削除しようとしました（推奨されません）。垂直方向の遷移を単純に削除して幅を単純に遷移できることはわかっていますが、高さと幅の両方を遷移させることが私のデザインにとって重要です。

4

1 に答える 1

1

最も簡単な解決策は、スクロールバーを常に表示させることだと思います。これを行う最も簡単な方法は、次の小さなスニペットを使用することです。

html {
    overflow-y: scroll; 
}

上記のスニペットを追加した例を次に示します: http://jsfiddle.net/joshnh/8XW4v/show

これが Webkit のバグかどうかはわかりません。考えてみれば、これは予想される動作だからです (これは奇妙なことであり、Firefox はそれが起こらないようにするために賢明なことを行いました)。基本的に、メディア クエリが開始されると、要素が縮小し、親はスクロール バーを必要としなくなります。これに関する問題は、スクロール バーが消えるとすぐに、利用可能な余分なピクセルが少ないため、メディア クエリが関連しなくなることです。そのため、オブジェクトが再び大きくなり、親がスクロール バーを元に戻し、メディア クエリを再び開始するなど...

于 2012-09-11T05:32:48.150 に答える