Как победить артефакты свойства filter: greyscale?

.row .item { 
  display: inline-block; 
  background: #000; 
} 
.row .item img { 
  max-width: 200px; 
  opacity: .3; 
  webkit-transition: opacity 1s; 
  -moz-transition: opacity 1s; 
  -o-transition: opacity 1s; 
  -ms-transition: opacity 1s; 
  transition: opacity 1s; 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); 
  filter: grayscale(100%); 
} 
.row .item img:hover { 
  -webkit-filter: grayscale(0); 
  -moz-filter: grayscale(0); 
  -ms-filter: grayscale(0); 
  -o-filter: grayscale(0); 
  filter: grayscale(0); 
  opacity: 1; 
}

<div class="row"> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
</div> 
<div class="row"> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
</div> 
<div class="row"> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
  <a href="#" class="item"> 
    <img src="http://images.freeimages.com/images/previews/910/limes-3-1329197.jpg"> 
  </a> 
</div>