transform缩放导致el-input获取焦点时字体出现模糊现象

Question

transform缩放导致el-input获取焦点时字体出现模糊现象，这怎么处理？

这个el-input还没获取焦点，截图有点模糊，但是下面一张图获取焦点后更模糊了

这个是获取焦点后的图：

这个问题是使用了屏幕缩放transform：scale（）来处理的适配屏幕

export function screenSize(editorDom) {
  let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
  let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
  let defWidth = 1920;
  let defHeight = 1080;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';

  $(window).resize(() => {
    let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
    let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';
  })
}

<div class="wrap" ref="editor">
 // .....代码
</div>

mounted() {
    screenSize(this.$refs.editor);
  },

.wrap {
    transform-origin: 0px 0px 0px;
    min-width: auto;
    width: 1920px;
    min-height: auto;
    height: 1080px;
    overflow: auto;
    transform: translate3d(0,0,0);
  }

请帮忙瞅瞅，感谢

Answer 1

你试试用CSS的zoom来实现你的缩放