Adding height to iframe makes resizing jumpy

Question

I am making my own code playground similar to codepen. I'm not trying to make anything special just something to learn how to make.

I am running into an issue when dragging the vertical bar from left to right to resize the columns. As soon as I put a height on the iframe that renders the code, resizing becomes jumpy and slow. Without the height it is smooth.

How can I add a height to the iframe and keep the resizing smooth?

I am using jquery-resizable.js to do the resizing.

Here is a link to my site: Code Playground

$(document).ready(function(){
$(".left-column").resizable({
   handleSelector: ".splitter",
   resizeHeight: false
 });

 $(".code-container").resizable({
   handleSelector: ".splitter-horizontal",
   resizeWidth: false
 });

 $(".code-container-2").resizable({
   handleSelector: ".splitter-horizontal-2",
   resizeWidth: false
 });
 $(".code-container-3").resizable({
   handleSelector: ".splitter-horizontal-3",
   resizeWidth: false
 });
 
   });

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

body {
  background-color: #343436;
  margin: 0;
  padding: 0;
}
.title {
  color: #CDD3DE;
  margin-left: 20px; 
  font-family: 'Fjalla One', sans-serif;
}

#main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  xtouch-action: none;
}

/*LEFT COLUMN*/
#left {
  flex: 0 0 auto;
  height: calc(100vh - 82.88px);

}
/*stretch makes the div containing the textarea expand the full height*/
.stretch {
  height: 33%; 
  overflow: hidden;
}

textarea {
  height: 100%;
  width: 100%;
  background: #1B2B34;
  font-family: Courier, sans-serif;
  font-size: 14px;
  color: #CDD3DE;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*style the textarea scrollbars*/
textarea::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}
textarea::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5;
}
textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}

/*the dragger for the textareas in left column*/
.splitter-horizontal {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}
.splitter-horizontal-2 {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}
.splitter-horizontal-3 {
  flex: 0 0 auto;
  height: 18px;
  background: url(https://williamcunningham.me/codebox/hsizegrip.png) center center no-repeat #535353;
  cursor: row-resize;
}

/*RIGHT COLUMN*/
#right {
  flex: 1 1 auto;
  height: calc(100vh - 82.88px);
}

/*the dragger between left column and right column*/
.splitter {
  flex: 0 0 auto;
  width: 18px;  
  background: url(https://williamcunningham.me/codebox/vsizegrip.png) center center no-repeat #535353;
  min-height: 200px;
  cursor: col-resize;  
}

  iframe {
    width: 99%;
    /*height: 100%;*/ 
    background-color: #fff;
  }

    <h1 class="title">Code Editor</h1>
    <div id="main">
      
      <div id="left" class="left-column">
        <div class="code-container stretch">
          <textarea id="html" placeholder="HTML" class="dragger scroll emmet-syntax-html"></textarea>
        </div>
        <div class="splitter-horizontal">
            </div>
        <div class="code-container-2 stretch">
          <textarea id="css" placeholder="CSS" class="dragger scroll emmet-syntax-css"></textarea>
        </div>
        <div class="splitter-horizontal-2">
            </div>
        <div class="code-container-3 stretch">
          <textarea id="js" placeholder="JavaScript" class="scroll"></textarea>
        </div>
                <div class="splitter-horizontal-3">
            </div>
      </div><!-- end left -->
      <div class="splitter">
      </div>
      <div id="right">
        <!-- where the final code is inserted -->
        
          <iframe id="code"></iframe>
          <footer>
            <button id="save">Save</button>
            <button id="clear">Clear</button>
          </footer>
        
      </div><!-- end right -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://williamcunningham.me/codebox/jquery-resizable.js"></script>

Answer 1

I was able to figure out how to fix this. When resizing, if the mouse went over the iframe it stopped the resize event. To get over this I added an absolutely positioned element over the iframe when resizing.