position:absoluteとtranslateを使用してセンタリングをしようとするとchromeでぼやける件について

どうも、webデザイナーのレーウィンです。最近タイトルが限定的すぎるかもしれなくてアクセス数伸びる気がしないけど、需要ありそうなのは書いてくよー。
今回はchromeだけで発生する不具合について。

まず、このコードをみてほしい

.contents-center {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

これは要素を中央に配置するテクニックの１つで、簡単に言うと、

absolute＋top50%+left50%で、.contents-centerの左上の角が画面の中央に行くよー。
↓
transform: translate(-50%, -50%);で要素の半分の長さ・半分の高さ分をマイナスするよー。
↓
要素が中央になるよー。

ってやつ。要素の大きさに依存せずセンタリングできるため、結構便利。
ただ、最近のchromeさんはこれを使用すると中の要素、とくに画像がぼやけるぼやける・・・。
他のブラウザではくっきりなのに、chromeだけ不具合が発生する事態に。
というわけで色々調べてみました。

ちなみに定番のbackface-visibility:hidden;も試してみた。
どうやらbackfaceまわりの影響ではないようで、効果はなかった。

解決法（？）

.contents-center img {
	image-rendering: pixelated;
}

15分くらいしか調べてないけど、現状だったらこれかなって回答。
image-renderingプロパティを使用する。
image-renderingは、画像が拡大縮小するときの処理をどうするべってやつ。
何故これでいけたのかは正直よくわからんので説明できない・・・。