链接悬停导致 background-size: cover;在 Chrome 中切换
Posted
技术标签:
【中文标题】链接悬停导致 background-size: cover;在 Chrome 中切换【英文标题】:Link hover causes background-size: cover; to shift in Chrome 【发布时间】:2012-06-07 15:19:55 【问题描述】:使用 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;
我的问题非常类似于:Background shift in Google Chrome when opacity changes on hover; jfriend00 的建议很有帮助,但我的问题有所不同,因为它纯粹是文本链接而不是 img。
我使用的是 Chrome 版本 19.0.1084.52。不存在的问题是Safari。任何建议将不胜感激。
【问题讨论】:
我也有同样的问题。它似乎与background-size: cover;
属性有关。悬停在覆盖的a
节点上确实似乎重新渲染了底层背景(在我的情况下是一个完全不同的节点),但我找不到它为什么这样做的线索。
【参考方案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 和 a 标签测试)
为获得最佳效果,请在较大的视口中使用,其中背景图像被拉伸很多,并且缩影最为明显
预期的结果是什么?
当使用激活悬停效果(如下划线、边距变化等)时,背景图像应保持一致(并且在迄今为止测试的所有其他浏览器上都是如此)
会发生什么?
当使用鼠标激活悬停效果时,背景图像会奇怪地扭曲。在元素周围的区域中,背景图像出现了几个像素。
请在下面提供任何其他信息。附上截图如果 可能。
在上面链接的 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
【讨论】:
【参考方案2】:可能是一个错误,我不知道这是否可行,但请尝试background-attachment: fixed;
【讨论】:
我在 Firefox 中遇到了这个问题,这对我有用!以上是关于链接悬停导致 background-size: cover;在 Chrome 中切换的主要内容,如果未能解决你的问题,请参考以下文章