CSS background-position change - Chrome bug

Question

I'm coding HTML page and noticed strange behavior in Chrome browser.

I have a custom dropdown with a png arrow which is from sprite image. What I'm trying to achieve is to change arrow to another when dropdown is opened and hovered.

I'm using SASS to prepare my sprites. When dropdown is opened or hovered background-position of sprite image changes.

After dropdown is closed on Chrome you can see both old and new arrow. It looks like this:

Chrome version: 39.0.2171.99

Here is a working example of dropdown .

IE and Firefox looks good. Any workarounds?

Answer 1

I found temporary workaround.

Setting transform3d: (0,0,0) on element, which background-position changes solves the bug.