w3c / IntersectionObserver

Intersection Observer
https://www.w3.org/TR/intersection-observer/
Other
3.62k stars 531 forks source link

IntersectionObserver with filters #509

Open wangxianzhu opened 1 year ago

wangxianzhu commented 1 year ago

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 9 months ago

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