Link hover causes background-size: cover; to shift in Chrome

Question

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.

Website is here: http://tylerbritt.com/

Styling is as such:

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;
    }

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.

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

Answer 1

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

What steps will reproduce the problem?

1. Background image with background-size:cover
2. Overlaying element (tested with div and a tags) that has a hover effect
3. For best results, use in a large view port, where the bg image is stretched a lot, and the abbarations are most evident

What is the expected result?

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)

What happens instead?

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.

Please provide any additional information below. Attach a screenshot if possible.

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.

IMPORTANT: It's super subtle, so you might have to sweep your mouse across the relevant elements a couple times before you notice

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

Answer 2

Might be a bug, I don't know if this will work but try background-attachment: fixed;