title: Resize handle is hidden
body: <p>The handle on a resizable div is hidden. I'm baffled by why it's hidden and what's covering it.</p>
  <p>I have other positioned divs around it which take up no space - but removing any one of them causes the handle to appear again.</p>
  <p>This error only occurs when I open it in Chrome, IE, or Edge, but not Firefox.</p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    position: relative;
  }
  
  #a {
    animation: a 1s infinite;
  }
  
  #b {
    background: red;
    overflow: auto;
    resize: both;
    height: 100px;
  }
  
  @keyframes a {
    100% {
      transform: translate(-100%);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="a"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div id="b"&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>