Chrome 22 - Negative Margin/Float Bug

A re-hosted version of Chrome bug #153355

HTML

<h1>Chrome 22 - Negative Margin/Float Bug</h1>
<p>Please copy & paste the URL of the icons into a browser, if they are appearing as broken images.</p>
<div class="categories">
    <a href="#" class="category">
        <span style="margin-right: -125px; opacity: 0; ">Web Development</span>
        <img src="http://i.imgur.com/H2iUC.png" alt="Web Development">
    </a>
    <a href="#" class="category">
        <span style="margin-right: -55px; opacity: 0; ">Gaming</span>
        <img src="http://i.imgur.com/Sc0hx.png" alt="Gaming">
    </a>
</div>
<p>For more information and a detailed explanation, please visit Chrome issue <a href="http://code.google.com/p/chromium/issues/detail?id=153355" target="_blank">#153355</a></p>

CSS

body {font:14px normal Sans-Serif; padding:10px;}
h1 {font-size:24px; }
p {margin:0px 0px 0px 0px;}

.categories {margin:10px 0px;padding:20px; background:#ccc; overflow:hidden;}
.category {height:32px; margin:0px 0px 0px 5px; background:#C61F1F; border-radius:19px; border:3px solid #fff; display:block; float:right; overflow:hidden;}
.category img {width:auto; position:relative; display:block; float:right;}
.category span {font-size:0.8em; color:#fff; padding:8px 0px 8px 10px; position:relative; display:block; float:left;}

JavaScript

// CATEGORY BUBBLE ANIMATIONS
// Variablize
var icon = $('.category img');
var text = $('.category span');
var measurement;

// Measure & Hide
text.each(function (){
    measurement = $(this).width() + 20;
    $(this).css({
        marginRight: '-' + measurement + 'px',
        opacity: '0'
    });
});

// Re-measure & Animate!!
icon.hover(function(){ 
    measurement = $(this).parent().find('span').width() + 10;
    $(this).siblings('span').stop().animate({
        marginRight: '5px',
        opacity: '1'
    }, 300);
}, function(){
    $(this).siblings('span').stop().animate({
        marginRight: '-' + measurement + 'px',
        opacity: '0'
    }, 300);
});