線性漸變不準確

我在谷歌瀏覽器有點問題，我的梯度：線性漸變不準確

body { 
    background-image: linear-gradient(rgba(43,66,88,0) 144px,#f4f7fa 144px), radial-gradient(at top center, #44698b,#162a3c); 
} 

.header { 
    height: 144px; 
} 

.main { 
    height: 500px; 
}

的HTML：

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

現場查看：http://jsfiddle.net/p726s/

你可以看到圖中的問題：

enter image description here

即使設置漸變在144px結束和下一個顏色開始於完全相同的像素，鉻創建一個小的梯度，使得第一顏色不在144px但在142px結束。接下來的兩個像素爲第二種顏色創建漸變，而不是創建直線。我不知道如何強制瀏覽器不這樣做。有沒有人有任何建議？

編輯2016年7月6日：

看來，谷歌已經修復了這個問題的最後幾個月...

來源

2014-03-28 KittMedia

我的眼睛無法區分您發佈的2張照片。我也在最新版本的Chrome中測試了你的小提琴，它看起來很好。 BTW Chrome對CSS的最新功能提供了最好的支持，FF是最糟糕的，你不需要支持FF，因爲我認爲瀏覽器很快就會淡出。 –

你能否嘗試澄清問題所在？從我所看到的一切看起來都很好。 –

請更改您的問題，但不清楚，如果他們看到它，可能會被主持人「不明確」關閉。 – cybermonkey

我沒有用我自己的Chrome安裝這一問題; Google Chrome是否已更新至最新版本（33.0.1750.154m）？

我知道您網站上的某些人可能沒有（或不願意）更新其Chrome瀏覽器安裝（例如，他們關閉了Google更新），但Chrome瀏覽器對某些內容而言是挑剔的，您可能有隻是偶然發現了一個它不喜歡的東西。

此外，請重新說明您的問題;我只能只是關於看到你的漸變的差異和一些人（如金王，誰回覆你的OP）可能無法看到差異。

來源

2014-03-28 20:50:36 cybermonkey

是的，我正在使用最新版本的Chrome。我簡直不敢相信，瀏覽器甚至不能創建最簡單的漸變形式... – KittMedia

Chrome似乎觸發了子像素渲染。檢查是否在元素或父容器上激活了任何CSS 2D或3D轉換，如transform:rotate()，並禁用它進行測試。

來源

2014-12-18 17:24:54 Nighto

不幸的是，沒有。 – KittMedia

很抱歉，很長時間才能回覆。如果將漸變背景更改爲純色或圖像，問題就會消失？ – Nighto

是的，它的確如此，這就是我現在使用它的方式......用圖像。 – KittMedia

線性漸變不準確

回答

相關問題