I've encountered an issue with Chrome's rendering in my web application that seems to be intermittent.
When I switch the float property between "left" and "none", Chrome doesn't reposition the elements properly. Interestingly, Firefox and IE work as expected in this scenario.
To see this bug in action, click on the "account-info" div to toggle the float values.
var $items = $(".menu > span");
$("#account-info").on("click", function () {
if ($items.css("float") === "left") {
$items.css("float", "none");
} else {
$items.css("float", "left");
}
});#account-info {
float: right;
background-color: #eee;
}
.menu .icon {
display: block;
}
.menu span {
/*display: block;*/
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="account-info">
<div class="menu">
<span class="icon">[left-icon]</span>
<span>User Name</span>
<span class="icon">[right-icon]</span>
</div>
</div>If display:block; is uncommented, Chrome does correct the positioning of the elements. However, it's always been my understanding that specifying float:left or float:right automatically implies display:block. Reference: Implied Block | CSS-Tricks
Is this a bug in Chrome or am I overlooking something here?
Chrome Version 39.0.2171.71m / Windows 8.1 64-bit