CodePen で Intersection Observer の rootMargin が効かない

#はじめに
CodePenでIntersection Observerを利用したら、なんだかうまく機能していなかった。具体的には、rootMarginが効いていない。

#具体例
下記のコードはカードが中央線に重なった場合に背景をカードと同じ色にするように書かれていますが、下からカードが頭を出した瞬間に背景がその色に変更されています。つまり、交差判定がviewport(screen)全体になっています。

See the Pen Untitled by Zakime (@zakime) on CodePen.

#解決方法
埋め込みの問題でその辺がアレってると思うので、いつ使うのかよく分からなかった rootオプションで解決しました。
CodePenのプレビュー画面と同じ大きさの要素を作って固定し、その中で表示します。
具体的には、コード全体をwrapで囲ってfixedで固定。

See the Pen How to get IntersectionObserver's rootMargin to work correctly in CodePen by Zakime (@zakime) on CodePen.

とりあえず問題解決！
※windowのscrollイベントを使ったコードを書いている場合は、コード全体を囲ったwrapのscrollイベントに変更しないと動かないので注意