优化transform在过渡效果中出现文字模糊和抖动问题_transform: translatex抖动

最近在项目提交后测试部门反馈这样的问题，下拉菜单在过渡效果中出现文字模糊和抖动。调试过程中发现除IE 11和FireFox 54下没有出现该问题，但在Chrome下出现上述问题。
1

原因：这是因为，transform变换会在浏览器上单独创建一个绘画层并重新进行渲染，rotate渲染的时候，由于图层渲染的时候也处理了周围的文字，如果高度为奇数的文字可能会存在半个像素的计算量，浏览器对这半个像素会进行优化渲染，所以边缘会出现模糊的情况。

优化方法：
1. 将transform: translate(-50%, -50%)改成transform: translate3d(-50%, -50%, 0)可以解决抖动，但仍然模糊。
2. 将元素的高度设置为偶数可解决；
3. 将transform: translate(-50%, -50%)中的y轴单位改成px也可以解决
4. 改成transform: translate(-50%, -52%)也可以解决（如果52%不行则从51%每个百分比尝试）
以上方法能较大程度优化问题，但仔细查看仍有细微抖动，最后用了第四种方法。