overflow: scrollを入れ子にするとSafariでスクロール不能になる場合がある 💻

DEMO

偶然発見したコンビネーションなのですが、上記iframeはSafariでスクロールできません。（17.5にて確認）
Google Chrome（126.0.6478.61）、Firefox（112.0.1）では問題なくスクロールできます。

ソースコード（抜粋）

#scroll { // ❶
  position: relative;
  height: 100vh;
  font-size: 24px;
  overflow: scroll;
}

#inner-scroll { // ❷
  position: fixed;
  inset: 0;
  background: red;
  opacity: .4;
  pointer-events: none;
  overflow: scroll;
  z-index: 1;
}

#big-dom {
  display: block;
  position: relative;
  width: 100%;
  height: calc(100vh + 1px);
  background: blue;
}

1. 画面一杯のoverflow: scrollの要素を作る
2. その中に同じサイズのoverflow: scrollの要素を作る
3. ❷で作った要素の子要素のサイズ（#big-dom）を❶で作った要素のサイズより大きくする

で発生するものと思われます。
普通はこんな状況を作らないと思うのですが、色々とコードを触っていたら偶然発見しました。
入れ子となっているDOMのpointer-eventsをnoneに設定しているにも関わらず、サイズが挙動に影響するので、直感に反する挙動となっています。

対策としては、overflow: scroll（子）の子要素の高さを親の高さ以下にすればスクロールするようになります。
つまり、今回の場合は、#big-domのheightをcalc(100vh + 1px)から100vhに変更すればOKです。