CSS3透明度正在留下透明正方形

Question

我正在使用Chrome，而且我在导航中获得了这些奇怪的透明方块。

我们告诉所有用户使用Chrome，因为我们非常依赖HTML5，因此其他浏览器并不重要。 http://html5test.com/compare/browser/chrome-33/firefox-28/ie-11/safari-7.0.html

当我鼠标悬停然后将鼠标移出元素时会发生这种情况。

有什么方法可以摆脱它吗？或者我必须忍受它，直到他们解决它？

少

/* 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;
          }
        }
      }
    }
  }
}