6

使用 CSS3，我将背景图片设置为封面。首次在 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;
    }

我的问题非常类似于：悬停时不透明度发生变化时 Google Chrome 中的背景偏移；jfriend00 的建议很有帮助，但我的问题有所不同，因为它纯粹是文本链接而不是 img。

我使用的是 Chrome 版本 19.0.1084.52。不存在的问题是Safari。任何建议将不胜感激。

4

2 回答 2

3

嘿，我注意到了完全相同的问题。绝对是镀铬的东西。以下是我提交给铬项目的一个问题：

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

哪些步骤将重现该问题？

  1. 背景尺寸的背景图片：封面
  2. 具有悬停效果的叠加元素（使用 div 和 a 标签测试）
  3. 为获得最佳效果，请在大视口中使用，其中 bg 图像被拉伸很多，并且消音最明显

预期的结果是什么？

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

相反会发生什么？

当使用鼠标激活悬停效果时，背景图像会奇怪地扭曲。在元素周围的区域中，背景图像出现了几个像素。

请在下面提供任何附加信息。如果可能，请附上屏幕截图。

在上面链接的 JSFiddle 中，它使用 ul/li 作为示例。我们确定将 ul 的显示更改为 inline-block 可以解决问题。

重要提示：它非常微妙，因此您可能需要将鼠标扫过相关元素几次才能注意到

UserAgentString: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1

于 2012-09-18T14:09:09.760 回答
1

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

于 2012-06-06T16:09:29.983 回答