如何检测水平动画元素到达视口中心？跨浏览器兼容问题求助

我需要实现一行通过transform动画的图片效果：当图片滚动到视口中心时，移除灰度滤镜（filter: grayscale(0%)），不在中心时保持黑白（filter: grayscale(100%)），效果如下：

我用IntersectionObserver写的方案在Firefox里正常，但Chrome只有鼠标移动时才生效，Safari完全没效果。调整options参数后，除了Firefox，其他浏览器表现还是不稳定。

实现代码如下：

const options = {
  root: document.body,
  rootMargin: '0% -50% 0% -50%',
  threshold: 0,
}

const observer = new IntersectionObserver((entries) => { 
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.style.filter = 'grayscale(0%)'
    } else {
      entry.target.style.filter = 'grayscale(100%)'
    }
  })
}, options)

const items = document.querySelectorAll('.img-container img');
items.forEach(img => observer.observe(img))

内容的提问来源于stack exchange，提问作者dras