Chrome inline-block with floated element page zoom bug

dabblet.css

/**
 * Chrome inline-block with floated element page zoom bug
 * 
 * Problem: Zooming the page causes text to break to next line with black square above at certain zoom levels.
 * This behavior isn't reproduced in other Webkit browsers, namely Safari.
 *
 * Temporary solutions:
 * 1) Setting white-space: no-wrap on the outer <div>
 * 2) Using display: inline-block on <i> instead of float: left.
 */

div {
	display: inline-block;
	border: 1px solid black;
	font: large sans-serif;
}

i {
	display: block;
	float: left;
	width: 10px;
	height: 10px;
	margin: 5px 5px 0 0;
	background: black;
}

dabblet.html

<div><i></i>Test</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}