解决使用transform页面字体出现模糊的问题,还有模态框不能拖拽的问题

我将盒子水平垂直居中显示,设置css样式,里面使用了transform:translate(-50%,-50%)

.contBox{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

在鼠标上下滚动的时候,会出现字体模糊的问题,对此我用了固定定位的方法(也还有其他方法)

.contBox{
   transform:none;
   position:fixed;
   top:0;
   left:50%;
   margin-left:-100px; /*盒子一半的宽度*/
}

我将transform设为none,这使模态框不能拖动,解决模态框拖动的问题

<div class='contBox'>
  <div class='title'>我是头部</div>
  <div>我是内容</div>
</div>

<script>
    var contBox = document.querySelector('.contBox');
    var title = document.querySelector('.title');

    //1当我们鼠标按下， 就获得鼠标在盒子内的坐标
    title.addEventListener('mousedown',function(e){
        var x = e.pageX - contBox.offsetLeft;
        var y = e.pageY - contBox.offsetTop;

        document.addEventListener('mousemove',move)
         
        //2鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
        function move(e){
        
            contBox.style.left= e.pageX - x +'px';
            contBox.style.top = e.pageY - y +'px';
            $('.contBox').css('margin-left','0')
        }

        //3鼠标弹起，就让鼠标移动事件移除
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })

    })
</script>