Jquery 向iframe添加高度会使调整大小变得跳跃

我正在制作类似于codepen的自己的代码游乐场。我不是想做什么特别的东西，只是为了学习如何做

当从左向右拖动垂直条以调整列的大小时，我遇到了一个问题。一旦我在渲染代码的iframe上设置了一个高度，调整大小就会变得急促而缓慢。没有高度，它是平滑的

如何向iframe添加高度并保持平滑调整大小

我正在用它来调整大小

以下是指向我的网站的链接：

$（文档）.ready（函数（）{
$（“.left column”）。可调整大小({
handleSelector:“.splitter”，
resizeHeight:false
});
$（“.code容器”）。可调整大小({
无手柄选择器：“.splitter horizontal”，
resizeWidth:false
});
$（“.code-container-2”）。可调整大小({
无手柄选择器：“.splitter-horizontal-2”，
resizeWidth:false
});
$（“.code-container-3”）。可调整大小({
无手柄选择器：“.splitter-horizontal-3”，
resizeWidth:false
});
});
@导入url（'https://fonts.googleapis.com/css?family=Fjalla+一);；
身体{
背景色：#343436；
保证金：0；
填充：0；
}
.头衔{
颜色：#CDD3DE；
左边距：20px；
字体系列：“Fjalla One”，无衬线；
}
#主要{
显示器：flex；
弯曲方向：行；
溢出：隐藏；
xtouch动作：无；
}
/*左列*/
#左{
flex:0自动；
高度：calc（100vh-82.88px）；
}
/*“拉伸”使包含textarea的div扩展到整个高度*/
.伸展{
身高：33%；
溢出：隐藏；
}
文本区{
身高：100%；
宽度：100%；
背景：#1B2B34；
字体系列：信使，无衬线；
字体大小：14px；
颜色：#CDD3DE；
溢出y：滚动；
溢出x：隐藏；
}
/*设置textarea滚动条的样式*/
textarea:：-webkit滚动条轨迹{
-webkit盒阴影：插入0.0 6px rgba（0,0,0,0.3）；
边界半径：10px；
背景色：#F5；
}
textarea:：-webkit滚动条{
宽度：12px；
背景色：#F5；
}
textarea:：-webkit滚动条拇指{
边界半径：10px；
-webkit盒阴影：插入0.0 6px rgba（0,0,0,3）；
背景色：#555；
}
/*左栏文本区域的拖动器*/
.水平分离器{
flex:0自动；
高度：18px；
背景：url(https://williamcunningham.me/codebox/hsizegrip.png)中-中不重复#535353；
光标：调整行大小；
}
.水平分离器-2{
flex:0自动；
高度：18px；
背景：url(https://williamcunningham.me/codebox/hsizegrip.png)中-中不重复#535353；
光标：调整行大小；
}
.水平分离器-3{
flex:0自动；
高度：18px；
背景：url(https://williamcunningham.me/codebox/hsizegrip.png)中-中不重复#535353；
光标：调整行大小；
}
/*右栏*/
#对{
flex:1自动；
高度：calc（100vh-82.88px）；
}
/*左柱和右柱之间的拖动器*/
.拆分器{
flex:0自动；
宽度：18px；
背景：url(https://williamcunningham.me/codebox/vsizegrip.png)中-中不重复#535353；
最小高度：200px；
光标：col resize；
}
iframe{
宽度：99%；
/*高度：100%；*/
背景色：#fff；
}
代码编辑器
拯救
清楚的
我找到了解决方法。调整大小时，如果鼠标移动到iframe上，它将停止调整大小事件。为了克服这个问题，我在调整大小时在iframe上添加了一个绝对定位的元素
 你能解释一下你到底改变了什么吗？它现在正在工作？或者你有最新的代码吗？我已经很久没有做过这个了。如果您想查看，这是成品：