Fixed Div Won't Scroll In Desktop Safari

It’s hard to reproduce a generic version of this behavior, so please see this CodePen in debug mode (in Safari):

https://s.codepen.io/stephen_marsh/debug/OjZXML/NQkzYnzLqXyA

When you click the yellow “shop look” trigger in the header image, a drawer of products should slide out. In Chrome and Firefox, this drawer will scroll as intended.

In Safari, this drawer usually will not scroll until something inside it is clicked, and then the scroll behavior is very laggy.

Interestingly, some magic in the CodePen wrapper fixes the behavior completely, if viewed in an alternate mode like full page:

https://codepen.io/stephen_marsh/full/OjZXML/

Now even in Safari the fixed div scrolls as intended and is smooth.

Can someone figure out what is causing this behavior? Thanks

SCSS:

$product-drawer-header-height: 84px;
$navigation-height-mobile: 60px;
$navigation-height-desktop: 96px;

.product-drawer-header {
  transform: translateX(100%);
  z-index: map-get($z-index, product-drawer-header);
  background-color: map-get($colors, teal);
  padding-left: 24px;
  padding-right: 24px;
  position: fixed;
  right: 0;
  top: 60px;
  width: 75%;
  color: white;
  border-color: white;

  @media #{$query-sm} {
    top: 96px;
    width: 33.333%;
  }

  .header-module-1 {
    width: 100%;
    margin: 24px 24px 24px 0px;
    color: map-get($colors, white);
    border-color: map-get($colors, white);
    a {
      color: map-get($colors, white);
    }
  }
}

.product-drawer {
  transform: translateX(100%);
  z-index: map-get($z-index, product-drawer);
  color: map-get($colors, white);
  background-color: map-get($colors, teal);
  padding-top: 84px;
  position: fixed;
  right: 0;
  top: 60px;
  overflow: scroll;
  width: 75%;
  height: calc(100vh - #{$navigation-height-mobile + $product-drawer-header-height});

  @media #{$query-sm} {
    top: 96px;
    width: 33.333%;
    // border: 1px solid yellow;
    margin-bottom: 96px;
    height: calc(100vh - #{$navigation-height-desktop + $product-drawer-header-height});
  }

  .product-tile {
    margin-bottom: 24px;
  }
}

thanks for looking,
-stephen