w3c/IntersectionObserver

IntersectionObserver with filters

wangxianzhu opened this issue · 1 comments

wangxianzhu commented

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>
wangxianzhu commented

@szager-chromium I think we need a flag to prevent visual rect mapping from expanding visual rect for pixel-moving filters.