修复了Div Won＆＃t; t Scroll In Desktop Safari

Question

很难重现此行为的通用版本，因此请在调试模式下（在Safari中）查看此CodePen：

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

点击黄色＆＃34;店铺外观＆＃34;在标题图片中触发，产品的抽屉应滑出。在Chrome和Firefox中，此抽屉将按预期滚动。

在Safari中，此抽屉通常不会滚动，直到单击其中的某些内容，然后滚动行为非常滞后。

有趣的是，如果在完整页面等备用模式下查看，CodePen包装器中的一些魔法可以完全修复该行为：

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

现在即使在Safari中，固定div也会按预期滚动并且流畅。

有人可以找出造成这种行为的原因吗？感谢

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;
  }
}

谢谢你的期待， -stephen