background-size:cover; を適用した要素にオンマウス（hover）でopacityをかけると、Mac版Firefoxで右端に線が出てしまう現象の回避方法をメモ。

先日コーディングをしていて、ある要素にbackground-size:cover; を適用した上で、オンマウス（hover）した際にopacityで当該要素が透過された時、右端に1pxほどの線が出現する現象に遭遇しました。

以前の記事「Firefoxで画像をフェードさせるとズレる」の方法で解消できるかと思いましたが、今回の事象には効果がありませんでした。
正直なところ、Windows版では問題もなく、うっすらとしたグレーのラインだったので無視したい気持ちでいっぱいでしたが、解決する必要がありいろいろ試してみた結果、なんとか解消することができました。

少し長くなりますが、もとのHTMLとCSSは以下の通りです。
なかなか解消できずにいじり回していたので、少し汚いかもしれませんがご容赦ください…。

HTML

CSS

不具合解消のために当該要素に加えたCSS。

理由は分かりませんが、とりあえず問題の現象が回避できるようになりました。
Firefoxは他のブラウザに比べて以前から奇数の処理が甘いように思いますので、もしかすると当該要素のwidthがレンダリング時に小数点になってしまったのではと予想したりしますが、時間の都合でそこまでは検証できていません。

幸い、背景が単色だったのでこのborderを加える方法でよかったのですが、模様やテクスチャが入っていたりする場合は他の方法を考えないといけませんね。
もしまた同じ現象に遭遇した際には、もう少し詳しく調査してみたいと思います。

なお、本件の動作検証はMac版Firefoxのバージョン40で行ない、問題が解消していることを確認しました。