Animate Bootstrap Alerts with jQuery UI

Why does the alert get the wrong sizing during animation?

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<body>
    <div id="myDiv">
        <div class="alert alert-danger" role="alert">Why am I the wrong size while the effect is running?!</div>
        <div id="someOtherDiv"><a href="#">Run effect</a></div>
    </div>
</body>

CSS

.alert {
    box-sizing: content-box !important;
}

JavaScript

$(document).ready(function(){
        // or try "bounce", "slide", "drop"...probably others.
        setInterval(function() { $( ".alert" ).effect( "shake" ) }, 5000);
})