writing-mode:vertical-rl を指定しているページで"Intersection Observer API"を使用したい

Question

前提・実現したいこと

body にwriting-mode:vertical-rl を指定しているページにて"Intersection Observer API"を使用したいです。
クラス名「fadein」が付いた要素がViewportに入ってきた時に表示させたいです。
PCでは動作しているのですが、iOSではうまく動作しません。
どうぞよろしくお願いいたします。

該当のソースコード

  let elements = document.getElementsByClassName('fadein');
  let options = {
  root: null,
  rootMargin: '0px',
  threshold: [0]
};
// IntersectionObserver インスタンスの生成
let observer = new IntersectionObserver(callback, options);

for (let i = 0; i < elements.length; i++) {
  // 同じインスタンスにターゲットとなる要素を渡す
  observer.observe(elements[i]);
}
const fadeIn = (target) => {
  target.classList.add('op');
};
    
const fadeOut = (target) => {
  target.classList.remove('op');
};  
function callback(entries, observer) {
  entries.forEach((entry) => {
    // observer.observe(target) した target を取得
    let element = entry.target;
    if (entry.isIntersecting) {
      fadeIn(entry.target);
    }
    else{
      fadeOut(entry.target);
    }
  });
}

body {
  -webkit-writing-mode: vertical-rl;
	   -moz-writing-mode: vertical-rl;
	    -ms-writing-mode: vertical-rl;
	     -o-writing-mode: vertical-rl;
  writing-mode:vertical-rl;
  direction: ltr;
}

.fadein{
  opacity: 0;
  transition-duration : 4s;
}

.op {
  opacity: 1;
  z-index: 40;
}

<figure><img src="images/xxb.jpg" alt="" class="fadein"/>

試したこと

writing-mode:vertical-rl;の記述を削除したらうまく動作しました。