CSS3 Transparency is leaving transparent squares - html

Question

I'm using Chrome and I'm getting these weird transparency squares on my nav.
We tell all of our users to use chrome because we are heavily reliant on HTML5 so other browsers don't really matter.
http://html5test.com/compare/browser/chrome-33/firefox-28/ie-11/safari-7.0.html
This happens when I mouse over and then mouse out on the element.
Any way to get rid of it? or do I just have to live with it until they fix it?
Less
/* Here? */
.transition() {
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
header.site-header {
background: url(http://imgur.com/UEhaqNil.jpg) center no-repeat;
background-color: #2e2e27;
background-size: 100%;
background-position: 100% 95%;
float: left;
width: 100%;
font-family: "Economica", "Open Sans", Arial, sans-serif;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 1); /* Here? */
padding: 50px 10px 10px;
.title-area {
color: rgba(255, 255, 255, 0.8); /* Here? */
float: left;
font-size: 38px;
padding: 16px 0 16px 30px;
h1 {
margin: -10px 0 0;
}
img {
height: 70px;
margin: 0 0 0 35px;
opacity: .8;
}
}
nav.nav-area {
display: block;
float: right;
margin: 80px 10px 0;
ul {
list-style-type: none;
li {
float: left;
margin: 5px;
a {
color: rgba(255, 255, 255, 0.9); /* Here? */
border-radius: 1px;
padding: 8px 10px;
font-weight: 300;
font-size: 22px;
text-transform: uppercase;
&:hover,
&:focus,
&.active {
background: #56BE8E;
color: white;
.transition(); /* Here? */
text-decoration: none;
}
}
}
}
}
}