2D变换导致Chrome中模糊的盒子阴影

Question

我有<div>未知宽度（可以放入不同的文字），我试图绝对定位，然后使用left: 50%和translateX(-50%)居中。除了我应用于<div>的方框阴影有时模糊之外，这种效果很好。

我怀疑这是因为它并不总是具有完全像素宽度，具体取决于内部的文本，因此当应用transform时，它落在像素之间，浏览器正在尝试抗锯齿它

在这里查看JSFiddle - https://jsfiddle.net/cqky6exx

有关如何解决这个问题的任何想法？