鏈接懸停導致background-size：cover;在Chrome中移動

使用CSS3，我設置了一個背景圖像作爲封面。首次在Chrome中加載頁面並將其懸停在鏈接上時，文本背景略有變化（但相當明顯）。我正在使用懸停過渡，但移除過渡時也會發生背景變化。鏈接懸停導致background-size：cover;在Chrome中移動

我的猜測是背景在懸停期間調整大小，但我不知道如何防止發生這種情況。一旦它發生了變化，您可以無任何問題地滾動其他鏈接。刷新頁面後，問題仍然存在。

網址爲：http://tylerbritt.com/

造型是這樣的：

body{ 
    text-align: center; 
    margin: 0 auto; 
    color: white; 
    font: bold 80pt 'Economica', sans-serif; 

    background: url(bg2.jpg) no-repeat center center scroll; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

a { 
    color: white; 
    text-decoration: none; 
    -webkit-transition: text-shadow 0.3s ease-out; 
    -moz-transition: text-shadow 0.3s ease-out; 
    -o-transition: text-shadow 0.3s ease-out; 
    -ms-transition: text-shadow 0.3s ease-out; 
    transition: text-shadow 0.3s ease-out; 
} 

    a:hover { 
     text-shadow: 0 0 6px #1c00f6; 
    }

我的問題是非常相似的：Background shift in Google Chrome when opacity changes on hover; jfriend00的建議是有幫助的，但我的問題不同，因爲它純粹是一個文本鏈接，而不是一個img。

我在Chrome版本19.0.1084.52上。這個問題不存在是Safari。任何建議將不勝感激。

來源

2012-06-02 tjamesbritt

我有同樣的問題。它似乎與'background-size：cover;'屬性有關。在覆蓋'a'節點上的懸停似乎確實重新渲染了底層背景（在我的情況下是一個完全不同的節點），但我無法找到它的原因。 –

可能是一個錯誤，我不知道這是否會工作，但盡力background-attachment: fixed;

來源

2012-06-06 16:09:29

嘿，我已經注意到了完全相同的問題。絕對是一件鍍鉻物。下面是一個issue我提交到Chromium項目：

Chrome Version  : 21.0.1180.89 
OS Version: 6.1 (Windows 7, Windows Server 2008 R2) 
URLs (if applicable): http://jsfiddle.net/9vvy6/62/ 
         http://castlelaw-kc.fosterwebmarketing.com/ 
Other browsers tested: 
Add OK or FAIL after other browsers where you have tested this issue: 
    Safari 5/6:OK 
    Firefox 14.0.1:OK 
    IE 9:OK 
    Chrome:FAIL

哪些步驟將重現該問題？背景尺寸

背景圖像：覆蓋
疊加具有懸停效果
爲了達到最佳效果，在一個大的視口使用，其中BG元素（DIV和一個標籤測試）圖像拉伸了很多，而且最明顯的是

預期結果是什麼？

當使用激活懸停效果（如下劃線，保證金變化等）的背景圖像應保持一致（和不迄今測試的所有其他瀏覽器）

，而不是會發生什麼？

當用鼠標激活懸停效果時，背景圖像變形奇怪。在元素周圍的區域，bg圖像會排列幾個像素。

請在下面提供任何其他信息。附加截圖，如果可能。

在上面鏈接的JSFiddle中，它使用ul/li作爲示例。我們確定將ul的顯示更改爲內嵌塊可以糾正問題。

重要提示：這是超級微妙，所以你可能有你發現之前，掃你的鼠標在整個相關元件的幾次

UserAgentString：Mozilla的/ 5.0（Windows NT的6.1; WOW64）爲AppleWebKit/537.1（KHTML，像Gecko）Chrome/21.0.1180.89 Safari/537.1

來源

2012-09-18 14:09:09 leggomuhgreggo

狗屎或換班？大聲笑 –

鏈接懸停導致background-size：cover;在Chrome中移動

回答

相關問題