链接悬停导致 background-size: cover;在 Chrome 中切换

2022-01-22 00:00:00 google-chrome background hover css css-transitions

使用 CSS3，我将背景图片设置为封面.首次在 Chrome 中加载页面并将鼠标悬停在链接上时，文本周围的背景会发生轻微变化(但非常明显).我正在为悬停使用过渡，但背景偏移也会随着过渡的移除而发生.

Using CSS3, I have set a background image as a cover. Upon first loading the page in Chrome and hovering over a link, the background around the text shifts slightly (but quite noticeably). I am using a transition for the hover, but the background shift also happens with the transition removed.

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

My guess is that the background is resizing during hover, but I'm not sure how to keep this from happening. Once it has shifted, you can rollover other links without any problem. After refreshing the page, the problem persists.

网站在这里: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;
    }

我的问题非常类似于:背景转移当悬停时不透明度发生变化时在谷歌浏览器中;jfriend00 的建议很有帮助，但我的问题有所不同，因为它纯粹是文本链接而不是 img.

My problems is very similar to: Background shift in Google Chrome when opacity changes on hover; jfriend00's advice was helpful, but my problem differs because it is purely a text link and not an img.

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

I'm on Chrome Version 19.0.1084.52. The problem does not exist is Safari. Any advice would be greatly appreciated.

推荐答案

嘿，我注意到了完全相同的问题.绝对是镀铬的东西.下面是我提交给 chromium 项目的issue:p>

Hey I have noticed the exact same issue. Definitely a chrome thing. Below is an issue I submitted to the chromium project:

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. 为获得最佳效果，请在较大的视口中使用，在该视口中，背景图像被拉伸很多，并且缩影最为明显

预期的结果是什么?

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

When using a activating a hover effect (like underline, margin change, etc.) the background image should stay consistent (and does on all other browsers tested so far)

会发生什么?

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

When the hover effect is activated with mouse, the background image warps oddly. In the area around the element, the bg image shits a few pixels.

请在下面提供任何其他信息.附上截图如果可能.

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

In the JSFiddle linked above, which uses an ul/li as the example. we determined that changing the ul's display to inline-block corrected the issue.

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

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

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

相关文章