安卓手机对于消息中心右上角提示小红点的兼容处理

项目背景：要实现如图一样的消息提示

 

问题：由于项目中使用了postcss-pxtorem的插件，所以导致一些正常的css在安卓机上不是圆的，border-radius写的是px,但是会自动转成rem,从而变成小数，安卓机解析偏差就变形了。

解决方案：先放大再缩小

.unread-info {
   background-color: #f56c6c;
   border-radius: 30px;
   color: #fff;
   display: inline-block;
   font-size: 36px;
   height: 52px;
   line-height: 52px;
   padding: 0 16px;
   min-width: 52px;
   text-align: center;
   white-space: nowrap;
   position: absolute;
   transform:  translateY(-50%) translateX(100%) scale(0.25);
   transform-origin:center left;/*由于小圆点的伸缩方向需要是右边，所以这样改，center的话会像两边扩展，位置就会跑偏*/
   top: 6px;/*这是对于父元素的定位*/
   right: 40px;
}