CSS3变换闪烁垂直对齐的元素

出于结构原因，我必须使用绝对定位+平移（-50%）来垂直对齐元素

但是，为这些垂直对齐的元素设置动画会在每个浏览器上显示一个小故障。元素在动画期间模糊，并在动画结束时闪烁

我已经尝试过使用透视图、translateZ和rotateZ，但没有成功

编辑->问题未解决-请查看最新回复以了解更多信息 您可以在附加的代码段中看到问题

#包装器{
背景：橙色；
位置：相对位置；
宽度：350px；
高度：150像素；
字体系列：无衬线；
}
#元素{
过渡：所有500ms缓解0ms；
转换：translate3d（-50%，-50%，0）；
位置：绝对位置；
最高：50%；
左：50%；
文本对齐：居中；
宽度：80%；
高度：自动；
线高：30px；
背景：水鸭；
颜色：白色；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit字体平滑：抗锯齿；
-webkit透视图：1000px；
透视图：1000px；
}
#包装器：悬停#元素{
转换：translate3d（-50%，-50%，0）标度（1.3）；
}

同侧阴唇

尝试使用em定位技术而不是变换。似乎transform:translate（）会导致渲染问题

#包装器{
字体大小：15px；
背景：橙色；
位置：相对位置；
宽度：300px；
高度：150像素；
字体系列：无衬线；
框大小：边框框；
}
#元素{
过渡：所有500ms缓解0ms；
位置：绝对位置；
最高：50%；
左：0；
显示：块；
文本对齐：居中；
宽度：80%；
利润率：-1米10%0；
高度：自动；
线高：2米；
背景：水鸭；
颜色：白色；
}
#包装器：悬停#元素{
字号：1.3em
}

同侧阴唇

在我的示例中，您的解决方案似乎解决了浏览器故障。然而，现实世界的情况要复杂得多。我用EM和所有元素的%大小创建了一个新的小提琴：另外，使用透视规则，它在比例上变得完全模糊