0

次のように、body 要素の背景として 100% 垂直 CSS グラデーションを使用しています。

body {
    background: -moz-linear-gradient(top,  rgba(0,101,189,0.5) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,101,189,0.5) 0px,rgba(255,255,255,1) 600px);
    background: -o-linear-gradient(top,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    min-height: 100%;}

ただし、JS (私の場合は bootstrap.js) がページの高さを動的に変更すると、奇妙なことが起こります。ボディの背景のグラデーションが適切に再描画されず、「破損」しているように見えます。このスクリーンショットを参照してください: http://imgur.com/wf5G8Qn

何か案は？どうもありがとう！

4

2 に答える 2

3

Webkit ブラウザーに CSS スタイルを強制的に再適用させることについての議論があります:スタイルの変更を反映させるために WebKit に再描画/再描画を強制するにはどうすればよいですか?

私にとってうまくいった解決策は<style>、ページの高さを変更した後に空の要素を追加および削除することでした:

$('<style></style>').appendTo($(document.body)).remove();
于 2013-05-17T07:04:56.823 に答える
0

これは実際には問題を解決するための答えではありません。しかし、グラデーションを使用したさまざまな場所でこの問題が何度も発生しました（主にChromeを使用しています）。ブラウザとグラデーションの実装方法次第だと思います。必要に応じて再塗装するのは大変そうです。グラデーションを .gradient などのクラスに配置し、移行が完了したらクラスを削除して追加することができます (断片化されたバージョンから新しいバージョンに移行するわずかなフラッシュが表示されます)。これにより、ブラウザがグラデーションを強制的に再描画する可能性がありますが、テストしていません。それは完璧ではありませんが、私が得たすべてです。

于 2013-04-23T19:30:26.240 に答える