Resize handle is hidden

The handle on a resizable div is hidden. I'm baffled by why it's hidden and what's covering it.

I have other positioned divs around it which take up no space - but removing any one of them causes the handle to appear again.

This error only occurs when I open it in Chrome, IE, or Edge, but not Firefox.

This is my code:

div {
  position: relative;
}

#a {
  animation: a 1s infinite;
}

#b {
  background: red;
  overflow: auto;
  resize: both;
  height: 100px;
}

@keyframes a {
  100% {
    transform: translate(-100%);
  }
}

<div id="a"></div>
<div></div>
<div id="b">
  <div></div>
</div>