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?
- Background image with background-size:cover
- Overlaying element (tested with div and a tags) that has a hover effect
- 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;