Rectangle 27 1

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


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

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

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

What is the expected result?

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

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

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.

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.

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)

Note