2

通常はページ分割されているテーブルのコンテンツ全体をユーザーが表示できる場合があり、まれに要素が非常に長くなります。Chrome では、要素の高さが約 32,000 ピクセルを超えると、背景のグラデーションがバラバラになり、黒一色やその他のさまざまなブロックとしてレンダリングされます。

http://jsfiddle.net/isherwood/hBm4C/1/

background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#ccc), color-stop(100%,#f5f5f5));

ここで 2011 年から同様の議論が見られますが、これは異なるようです。

4

1 に答える 1

2

わかりました、これはちょっと独特で、明らかに Chrome のバグによるものです

スタイリングから境界線を削除すると、奇跡的にうまく機能します:

http://jsfiddle.net/hBm4C/2/

.gradient-tall {
width: 150px;
height: 35000px;
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#f5f5f5));
vertical-align: top;

}

box-shadow を使用すると、グラデーションと境界線も実現できます。

.gradient-tall {
    width: 150px;
    height: 35000px;
    display: inline-block;
    box-shadow:0 0 0 1px #777;
    background:#ccc;
    background-image:-webkit-linear-gradient(#ccc 1%, #f5f5f5 99%);
    vertical-align: top;
}

http://jsfiddle.net/hBm4C/3/

于 2013-04-24T12:53:20.083 に答える