-webkit-linear-gradient在Chrome/Safari中導致條帶化

標題prettymuch說明了一切。下面的第一張圖片是截圖當整個網頁是關於8000像素高，在最新版本的Chrome瀏覽次數：-webkit-linear-gradient在Chrome/Safari中導致條帶化

enter image description here

而這張照片是不同的頁面（使用相同的CSS），這是大約800像素高：

enter image description here

這裏是代碼：

body{ 
    background-color: #f3ffff; 
    margin:0px; 
    background-image: url('/media/flourish.png'), 
     -webkit-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 

    background-image: url('/media/flourish.png'), 
     -moz-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 


    background-image: url('/media/flourish.png'), 
     -o-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 
    background-position: center top, center top; 
    background-repeat: no-repeat, repeat-x; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')"; 
    }

漸變旨在從頁面頂部的250px處切斷。綁定的程度似乎取決於頁面的總高度這一事實是非常奇怪的：在這兩個（800px和8000px）之間的高度頁面似乎具有比第一個示例更小但仍然顯而易見的帶。

有趣的是，我之前使用-webkit-gradient('linear'...)而不是相同的問題;我只換到-webkit-linear-gradient，所以它會符合我的-moz和-o漸變。

我還沒有在Safari上試過它，但是上面的代碼使它在Firefox中工作得非常好，在Opera中有種工作（顏色混亂，但漸變仍然平滑）。 Nevermind IE，我放棄了。

有沒有其他人看過這個？

更新：這也發生在我的Mac的Chrome/Safari上，但樂隊的大小約爲頂部圖片中顯示的樂隊的1/3，完全相同。 OSX Chrome和OSX Safari中的條帶相同。

三分之一的大小仍然顯而易見，但不是很震撼。如果您想在其他瀏覽器中看到自己的實際頁面，則該頁面位於http://www.techcreation.sg/page/web/Intro%20to%20XTags/。 CSS是使用less.js在瀏覽器中編譯的「inline」css。

來源

2011-08-29 Li Haoyi

我可以不要看問題，因爲你的鏈接目前沒有工作（'KeyError at/page/web/I ntro to XTags /'）。但是，這似乎是一個WebKit錯誤。堆棧溢出可能能夠提供解決方法，但它無法修復該錯誤。你應該提交一份錯誤報告，如果你還沒有這樣做，請點擊：https：//bugs.webkit.org/ – thirtydot

你介意看看我的解決方案嗎？ –

結束了使用;謝謝=） –

外貌就像一個webkit的bug。我想出了下面的解決方法，在最新的Chrome和FF上進行了測試。總之，您將在主要內容後面放置一個包含背景的div。我還添加了一些樣式讓IE更快樂。

鑑於此HTML：

<html lang="en"> 
<head> 
    <style> 
     ... 
    </style> 
</head> 
<body> 
    <div class="background">bgdiv</div> 
    <div class="content_pane"> 
     <div class="titlebar">Leave a Comment!</div> 
     <div class="comment">Your Comment.</div> 
    </div> 
</body> 
</html>

與此樣式相結合：

body{ 
     background-color: #f3ffff; 
     min-height: 100%; 
     margin:0px; 
    } 
    .background { 
     height: 250px; 
     left: 0; 
     position: absolute; /* could use fixed if you like. */ 
     right: 0; 
     top: 0; 
     z-index: -10; 

     background-image: 
      -webkit-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -moz-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -o-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -ms-linear-gradient(top, 
       rgba(99,173,241,1) 0%, 
       rgba(0,255,255,0) 250px 
      ); /* IE10+ */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0); /* IE6-9 */ 
     background-image: 
      linear-gradient(top, 
       rgba(99,173,241,1) 0%, 
       rgba(0,255,255,0) 250px 
      ); /* W3C */ 
     background-position: center top, center top; 
     background-repeat: no-repeat, repeat-x; 
    } 
    .content_pane { 
     background: white; 
     border: 1px dotted white; 
     border: 1px solid grey; 
     font-family: arial, sans; 
     font-weight: bold; 
     margin: 6em auto 5em; 
     width: 50%; 
    } 
    .titlebar { 
     background: #3f7cdb; 
     color: white; 
     font-family: arial, sans; 
     padding: .25em 2ex .25em; 
    } 
    .comment { 
     padding: 1em; 
    }

應該出來找這樣的，無論窗口大小：

Chrome image

來源

2011-09-11 06:52:45

我刪除了'-image'，仍然可以工作，那爲什麼還要添加呢？ –

我認爲它來自我使用的css梯度發生器。沒有麻煩去改變它。看起來這比「背景：」更具體一些。 –

這裏是小提琴：http://jsfiddle.net/j8y3q5t0/如果任何人有興趣看演示。 – SearchForKnowledge

Webkit以相同的方式渲染-webkit-gradient('linear'...)和webkit-linear-gradient。問題在於你的多重背景。我有同樣的問題，我以兩個不同的元素在彼此頂部結束，然後給每個人一個背景。是這樣的：使用RGBA（）值時，

<body> 
<div class="body-overlay"<div> 
</body>

CSS

body{-webkit-linear-gradient(...)} 
    .body-overlay{background:url('blah.png')}

我想這是因爲圖像具有固定像素

來源

2011-08-29 18:06:29 Mohsen

，似乎沒有工作;我完全拿出了蓬勃發展，我仍然得到了條帶。鑑於它取決於整個頁面的高度，我認爲這是與梯度計算方式糾纏在一起的事情。 –

這就是我所知道的。希望你找到bug – Mohsen

好像鉻量有一些錯誤。我嘗試了正常的十六進制值，它似乎解決了我的問題。

看here如果它也爲你解決它。

編輯

貌似問題是在250px的限制，因爲它僅在設置時出現。

我沒有設法想出比this one更好的解決方案。

用你喜歡的梯度重疊一個div，高度爲250px。然後，您可以將網頁的高度設置爲您想要的高度，因爲div始終爲250像素高。

來源

2011-09-06 10:11:25

而不是使用背景圖片，請嘗試使用這個（背景） -

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

，還可以使用十六進制值始終。但是從用戶體驗的角度來看，使用圖像會更好（因爲您正在加載圖像），您不必擔心跨瀏覽器兼容性問題。

來源

2011-09-06 17:05:21 ShalomSam

我想使用RBGA的主要原因是爲了透明度;顏色從藍色變爲藍綠色，從不透明變爲透明，變爲灰白色背景，實現了令人愉快的藍色 - >藍綠色 - >白色漸變，手動生成會有些惱人。我會嘗試使用半透明的.png圖像來查看它的結果。 –

是的，我建議一個透明PNG（記住它不會在IE6中工作）因爲RGBA不會在所有瀏覽器版本中工作。但嘗試上面的代碼，看看它是否停止了帶如果我記得我是否有相同的問題..當我在背景圖片中使用它... – ShalomSam

您是否嘗試過設置background-size: auto, 250px 250px; - auto爲第一張圖片，250px爲您的漸變。

如果您不需要漸變圖像那麼大，它會覆蓋整個頁面，最好限制它的大小。除了渲染大圖像的問題之外，我認爲瀏覽器的性能更好。

所以，你的例子看起來像http://jsfiddle.net/kizu/phPSb/（盲目編碼，但不能重現問題，但）。

來源

2011-09-07 14:50:00 kizu

您的演示環節不工作，但我做了一些測試，並使用Chrome時加的100％寬度/高度對身體/ html元素，像這樣的工作對我罰款：

body, html { 
    width:100%; 
    height:100%; 
}

Demo

你可以嘗試，或者你可以聲明一個頭/標識部，您可以添加啓動梯度，只是添加結束漸變到你的CSS的身體，因此正確地融合在一起，就像這樣：

CSS

body, html { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 

body { 
    background-color: #f3ffff; 
    margin:0px; 
    height:10000px; 
} 

.header { 
    height:300px; 
    width:100%; 
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px 
    ); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px); 
    background-position: center top, center top; 
    background-repeat: no-repeat, repeat-x; 
    background-size:auto; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')"; 
}

HTML

<div class="header"> 
    content 
</div>

Demo

友情提示：任何人找你可以看到它在這裏發生在Chrome中的問題：http://jsfiddle.net/skJGG/

來源

2011-09-10 21:48:40

確實爲身體和html工作添加高度和寬度。謝謝！ –

-webkit-linear-gradient在Chrome/Safari中導致條帶化

回答

相關問題