Question

使用CSS3，我将背景图像设置为封面。首次在Chrome中加载页面并将鼠标悬停在链接上时，文本周围的背景略有变化（但非常明显）。我正在使用悬停的过渡，但背景移位也会在移除过渡时发生。

我的猜测是背景在悬停期间正在调整大小，但我不确定如何防止这种情况发生。一旦转移，您可以毫无问题地翻转其他链接。刷新页面后，问题仍然存在。

样式就是这样：

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不存在问题。任何建议都将不胜感激。

Answer 1

嘿，我注意到了同样的问题。绝对是铬的东西。以下是我提交给铬项目的issue：

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

哪些步骤会重现此问题？

背景图片背景图片：封面
使用悬停效果覆盖元素（使用div和标签测试）
为了获得最佳效果，请在大型视口中使用，其中bg图像被拉伸很多，并且abbarations最明显

预期结果是什么？

当使用激活悬停效果（如下划线，边距更改等）时，背景图像应保持一致（并且在目前为止测试的所有其他浏览器上都是如此）

会发生什么？

用鼠标激活悬停效果时，背景图像变形奇怪。在元素周围的区域中，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

Answer 2

可能是个错误，我不知道这是否有效但请尝试background-attachment: fixed;

链接悬停导致background-size：cover;改变Chrome

2 个答案: