I don't find mention of filters in the spec when calculating the intersection rect. Browsers are inconsistent. Chrome considers filters, which doesn't follow the spec. Firefox doesn't consider filters, which follows the spec.
Test case:
<!DOCTYPE html>
<div id="root" style="width: 200px; height: 200px; overflow: scroll">
<div style="height: 300px"></div>
<div id="target" style="width: 100px; height: 100px; background: green; filter: blur(30px)"></div>
<div style="height: 300px"></div>
</div>
<pre id="output" style="height: 200px"></pre>
<script>
root.scrollTo(0, 90);
let observer = new IntersectionObserver((entries, observer) => {
let e = entries[0];
output.textContent += '=========OBSERVE' +
'\nbondingClientRect=' + JSON.stringify(e.boundingClientRect) +
'\nrootBounds=' + JSON.stringify(e.rootBounds) +
'\nintersectionRect=' + JSON.stringify(e.intersectionRect) +
'\nintersecting=' + e.isIntersecting +
'\nintersectionRatio=' + e.intersectionRatio;
}, {root: root});
observer.observe(target);
</script>
I don't find mention of filters in the spec when calculating the intersection rect. Browsers are inconsistent. Chrome considers filters, which doesn't follow the spec. Firefox doesn't consider filters, which follows the spec.
Test case: