Javascript 全屏显示后文本区域文本意外向下移动

我有一个

textarea

来获取用户输入。我希望输入文本根据

textarea

的宽度调整其大小。每次按下

键

时，输入文本都会调整大小，以便可以放入

文本区域

（当用户键入长文本时，输入文本会变小，以便放入

文本区域

）

代码按预期工作，但有一个有线问题除外：

当我尝试全屏显示或反之亦然时，我启动此功能，文本按预期调整大小：

document.getElementsByTagName("BODY")[0].onresize = function() {

       console.log('Window Resized..');
       setTimeout(function(){
       adjustTextSize();
       },1000);

}

但是当你开始打字并按任意键时（全屏显示后），整个文本向下移动大约20像素

如果退出全屏时退出全屏，同样的情况会再次发生，相同的

onresize

功能会执行此操作，并且正如预期的那样，我们有调整大小的文本，（退出全屏后）按任意键，文本再次向下移动

代码如下：

let textarea = document.getElementsByTagName("textarea")[0];
textarea.focus();
textarea.style.overflow = "hidden"; 

$('textarea').keydown(function(){
   adjustTextSize();
});

document.getElementsByTagName("BODY")[0].onresize = function() {

       console.log('Window Resized..');
       setTimeout(function(){
       adjustTextSize();
       },1000);

}

function adjustTextSize(){
    let font_size = 44;
    let textWidth = getTextWidth($('textarea').val(), `bold ${font_size}px Open Sans`).toFixed(2);
    let textareaWidth = $('textarea').width();
    console.log(textareaWidth, textWidth);

    while (textWidth > textareaWidth) {
           font_size -= 1;
           textWidth = getTextWidth($('textarea').val(), `bold ${font_size}px Open Sans`).toFixed(2);  
           console.log('inside while loop');             
    }
    $('textarea').css('font-size', font_size);
}


function getTextWidth(text, font) {
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}