Using SVG as CSS3 background-image with scaling

When I use SVG in background property like this:

.svg-button {
    -webkit-transform: scale(3.0) // root of the problem!
    background: url(Button.svg) no-repeat;
    width: 32px;
    height: 32px;
}

I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.

If I replace CSS background property on:

<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>

the image is clear in any scale in any case.

Where is the problem?

Sample on jsfiddle

Update: I found some more information about this problem:

1. StackOverflow question
2. Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.