vue中的弹框是居中显示，滚动条一滚动就内部文字模糊

困扰很久的问题，还是偶尔出现的。在项目中设置了一个弹框，点击显示 关闭隐藏。弹框中的输入框 选择项比较多，造成需要用到上下滚动的滚动条，但是滚动条一向下滚动，内部的文字等就变得模糊。

今天解决了 记录一下。

原因：

• 设置弹框的盒模型的css:

.pro_infor_msg_box {
    position: fixed;
    z-index: 1003;
    width: 998px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

• 设置的弹框里的盒模型的css：

.message_box_cont {
    max-height: calc(100vh - 159px);
    overflow-y: scroll;
    border: 3px solid transparent;
    background: #fff;
    padding: 20px;
    border-radius: 0 0 8px 8px;
}

解决：

比如盒子的宽度设置为400px，高度601.5px，这样transform计算出的50%是200px和300.75px，这种情况就会出现了字体模糊的现象，查阅资料后发现translate为百分比计算出为小数的时候会出现字体模糊现象。

故而最后将盒模型的高度改为偶数，因为我用的calc动态设置，将减去的高度减1就不在模糊了