Risolvere il bug della riscalatura nel cambio opacità CSS3 su Firefox

Forse a qualcuno sarà già capitato notare un bug riproducibile su Firefox legato al cambio di opacità delle immagini che causa una riscalatura anomala di circa 1 px mentre l'opacità non è al 100%.

Si tratta di un bug noto già da un paio di anni ma essendo piuttosto raro non è stato ancora risolto. In questo video si può vedere il bug in azione:

Ecco uno zoom di esempio del bug:

Con la riga tratteggiata ho evidenziato alcune delle anomalie.

Come riprodurre il bug:

Ecco un esempio di codice HTML/CSS attraverso il quale si può riprodurre il bug:

HTML:

<a href="#">
  <img width="280" height="210"  src="path/to/image.jpg">
</a>

CSS:

img{
  max-width:100%;
}
a{
  background: none repeat scroll 0 0 black;
  display: block;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  width:271px;
}
a:hover img{
  opacity:0.5;
}

L'immagine è di esattamente 280x210.

Quando si passa sopra all'immagine con il mouse viene applicato il cambio di opacità e questo comporta una riscalatura di circa 1 px.

Non si riesce a riprodurre questo bug in ogni caso, sembra dipendere dalle dimensioni degli oggetti, probabilmente è dovuto a qualche problema di arrotondamento degli algoritmi usati da Firefox per applicare questi effetti.

Come si risolve il bug

Fortunatamente esiste un trucco per aggirare questo bug. Basta applicare uno stile "box-shadow" vuoto all'immagine. Così:

img{
  box-shadow: #000 0 0 0;
}

In questo modo si risolve il problema.