Intersection Observer APIのrootMarginが効かない

Question

前提・実現したいこと

JavascriptのIntersection Observer APIでの画像の遅延読み込みについて調べています。
対象の画像がビューポートの100px手前に来たときに画像の取得を開始したいと思っています。
具体的には以下の様にrootMarginの上下を100pxに設定しています。

const options = {
    // 上下100pxで発火
    rootMaring: "100px 0"
};

※以下の記事を参考に実装を行っています。
参考記事
https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09

参考デモ
https://andus.heteml.jp/intersection_observer/1.html

今回の質問内容

実際に参考デモで動作確認を行ったところ、画像がViewportの100px手前に来たときではなく、Viewportと画像が交差したとき（画像が画面内に入ってきたとき）に発火しているように見受けられます。

他の記事も色々みて調べてみましたが、やはりrootMarginでの制御で良さそうなのですが、
どこか使い方が間違っているのでしょうか？それとも私の確認方法が間違っているのでしょうか？

何かご存知の方いらっしゃいましたら、何卒よろしくお願い致します。

確認方法

この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントで処理が止まるかを確認しています。（ブレークポイントは交差判定がtrueの時に止まるように置かれています。）表示されている画面のすぐ下には次の画像があるため、ブレイクポイントで止まる想定なのですが、実際には次の画像とViewportが交わるまで交差していない判定になっており、コンソール上のブレイクポイントで止まりません。

（実際、もう少しスクロールを行い、次の画像の上辺がViewportに差し掛かった当りでコンソール上のブレイクポイントで処理が停止します。

また、ChromeのDevToolのNetworkパネルでも確認を行いましたが、画像の100px手前ではなく、画像がViewportと交差したときに画像の取得が行われていることを確認しました。

試したこと

rootMarginを500pxにしてみましたが、変わりませんでした。
また、交差の判定条件をintersectionRatioにもしてみましたが、変わりませんでした。

if (entry.intersectionRatio > 0)

補足情報（FW/ツールのバージョンなど）

polyfillは使っていません。
Chromeで確認を行いました。

該当のソースコード

(function() {
	"use strict";

	// ターゲット指定
	const targets = Array.from(document.querySelectorAll("img[data-src]"));

	// 実際の画像パス
	const img_path = "data-src";

	// オプション
	const options = {
		// 上下100px手前で発火
		rootMaring: "100px 0"
	};

	// 初期化
	const observer = new IntersectionObserver(callback, options);

	targets.forEach(function(img) {
		// 監視の開始
		observer.observe(img);
	});

	// コールバック
	function callback(entries, object) {
		entries.forEach(function(entry) {

			// 交差していない
			if (!entry.isIntersecting) return;

			// ターゲット要素
			const img = entry.target;

			// 遅延ロード実行
			loading(img);

			// 監視の解除
			object.unobserve(img);
		});
	};

	// 遅延ロード
	function loading(img) {
		// data-srcの値を取得
		const src_val = img.getAttribute(img_path);
		if (src_val) {
			// 画像パスを設定
			img.src = src_val;
			img.onload = function() {
				// data-src属性を削除
				this.removeAttribute(img_path);
			};
		}
	};
})();

	<ul>
		<li><img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./img/alexander-possingham-209285.jpg" alt="" width="500" height="333"></li>
        ...
	</ul>

Answer 1

本件の事象の原因
原因１：スペルミス
修正前:rootMaring
修正後:rootMargin

原因２：pxか%をつける
修正前: rootMargin: "100px 0"
修正後: rootMargin: "100px 0px"

pxまたは%を付けていない場合、以下のメッセージがブラウザコンソールに出力される。
Uncaught DOMException: Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.
（本事象の場合、rootMarginのスペル自体が間違っていたため、初期段階ではコンソールにエラーが表示されていなかった。）

ご調査にご協力くださった方々、誠にありがとうございました。

Comments

[oikashinoa]

確認お疲れ様でした。

ローカルでならきちんと動いた件、確認ありがとうございました。協力したかいがあります。

[mTono]

大変お世話になりました！
参照元の記事の方にも記事を訂正頂けたので、
これで同じ過ちを繰り返す人は少なからず減るかと！
では。

Answer 2

中途半端な回答です。

まずはスペルミス。

rootMaring:
↓
rootMargin:

ただし、Intersection Observer API - Web API | MDNの’監視される要素をターゲットにする’のcodepenで試してもなんか期待通りにならない。

rootMargin:

• -100px ちゃんとマージン減る（だいぶ画面に入ってから反応する(MDNのサンプルだと四角四隅の数値が変わる)）
• 100px 画面に入ってからしか反応しない。

Comments

[mTono]

ご回答ありがとうございます！
スペルミス失礼いたしました。

>> ただし、Intersection Observer API - Web API | MDNの’監視される要素をターゲットにする’のcodepenで試してもなんか期待通りにならない。

やっぱりそうですよね。
IntersectionObserverについて紹介している記事はrootMarginを設定すればviewportに入る前でも発火できるよ謳っているのですが、
実際に動作を検証してみるとrootMarginを正にした際はviewportとの交差で発火するので、何か知らない仕様があるのかと思い質問させていただきました。

私の方でももう少し調べてみます。
ご回答、誠にありがとうございました。

[oikashinoa]

MDNのサンプルですら期待通りの動作にならないのが解せないです。
- 環境を疑ったんですが、firefox/Ubuntuも同じ。
- Codepen、jsfiddleも結果同じ…

Ubuntu環境だからってことはないと思いたいけど…（vivaldi,chronium,firefoxで軽くテスト）

何か分かりましたら情報共有お願いします。

[oikashinoa]

[Positive rootMargin doesn't seem to work · Issue #260 · w3c/IntersectionObserver](https://github.com/w3c/IntersectionObserver/issues/260)

斜め読みするとCodepen（jsfiddleかも）はiFrame使っているからとか、Bodyからoverflow: hiddenを取れ とか。
お試し&ソースを見て頂けると助かります。明日は出張なので見るのは遅いかなぁ。

It turned out to be CSS that was the problem in our app. Our body hadoverflow: hidden. Inside, we had an element (B) which was statically positioned at the top of the screen and another element (C) which had overflow: auto (so this was the element being scrolled). It's within this element C that the observed element (D) exists.

I've removed overflow: hidden from the body, gave B fixed positioning, and removed overflow: auto from C. This fixed it.

[mTono]

遅くまでご調査いただきありがとうございます！
本件の事象の原因がわかりました。

原因１：まずはご指摘いただいた通り、スペルミスが原因でした。

修正前:rootMaring
修正後:rootMargin

修正後に改めてdevtoolのコンソールを確認すると、以下のメッセージが表示されていました。
Uncaught DOMException: Failed to construct 'IntersectionObserver': rootMargin must be specified in pixels or percent.

rootMarginはpxか%をつけろと言っているようなので、そのとおりに修正すると希望の動作となりました。
原因２：pxか%がついていない。
修正前: rootMargin: "100px 0"
修正後: rootMargin: "100px 0px"

cssのmarginと同じ感覚でpxを省略すると動かないんですね。
大変ご面倒をおかけしました。

また、先程のMDNのデモですが、確かにCodepen上では期待の通りに動いていませんが、
ローカルにコピーして動かしたところrootMarginが正の場合でも期待どおりの動きとなっていました。
（少し言及されている通り、iframeが関係していそうです。)

ひとまず、この件はこれでクローズさせていただきます。
ご協力、誠にありがとうございました。