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

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


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.89OS 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 ifpossible.

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


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