Rotated DIV edges blurry in Chrome

I have an audio post where the information is in rotated DIVs that are displayed on top of the album art. To see what I mean go here (the page). The area on the bottom left corner is the information. When viewed in Chrome you will see that the edges of the DIVs are blurred. Is there a way to "alias" the DIVs so they appear sharp? I know it's not a resolution thing because Firefox displays them perfectly.

.audioBox {
position:absolute;
bottom:160px;
margin-left:-11px;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
z-index:3;
width:343px;
}

.boxify {
margin:1px;
padding:5px;
float:left;
bottom:0;
width:329px;
}

.box {
background:#000; 
padding:5px;
padding-left:10px;
padding-right:10px;
margin-left:-5px;
}

<div class="audioHolder">
<div class="audioBox">

<div class="boxify" id="song">

                    <img id="audioBubble"    
src="http://static.tumblr.com/ux4v5bf/JC6lpv4v1/audio.png">

{block:TrackName}
<span class="box">{TrackName}</span>开发者_C百科;
{/block:TrackName}
</div>

<div class="boxify" id="artist">
{block:Artist}
<span class="box">{Artist}</span>
{/block:Artist}
</div>

<div class="boxify" id="label">
<span class="box">{PlayCountWithLabel}</span>
</div>

<div class="boxify" id="download">
<span class="box">Download
{block:ExternalAudio}
<a href="{ExternalAudioURL}">Download</a>
{/block:ExternalAudio}</span>
</div>

</div>

Solution: I replaced the background color with a background image of the same color instead. :-) Hope it helps somebody else with a similar problem.

I know I'm little late but...

I have similar problem now and in my case changing the size helps, just use even numbers

.blurry {
    left: 100px;
    height: 30px;
    width: 135px;
}

.sharp { 
    left: 200px;
    height: 30px;
    width: 136px;  
}

http://jsfiddle.net/_hags/9e4cS/