Intersection Observer API produces a zero area intertsectionRect and intersectionRatio for on-screen "display: inline" divs.
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: jfrederic, Unassigned)
Details
(Keywords: parity-chrome)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36
Steps to reproduce:
Full reproduction at https://stackblitz.com/edit/rxjs-yo2jz5?file=index.html . Simply load and scroll to see the printed intersectionRect.
The HTML for this page is:
<html>
<head>
<style>
#block {
display: inline;
boder: 1px solid red;
}
#inner-block {
background-color: lime;
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1>Firefox Intersection Observer Bug</h1>
<p>Open the console to see the results.</p>
<div id='block'>
<div id='inner-block'></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Bottom of the page.
</body>
</html>
The JavaScript for this page is:
const iobs = new IntersectionObserver((observations) => {
console.log('Intersection Ratio: ', observations[0].intersectionRatio);
});
const block = document.querySelector('#block');
iobs.observe(block);
Actual results:
Intersection Ratio: 0
Expected results:
Intersection Ratio: 1
(because the div is clearly on screen)
|
||
Comment 1•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
Sorry, here's a repost with corrected Markdown formatting:
Steps to reproduce:
Full reproduction at https://stackblitz.com/edit/rxjs-yo2jz5?file=index.html . Simply load and scroll to see the printed intersectionRect.
The HTML for this page is:
<html>
<head>
<style>
#block {
display: inline;
boder: 1px solid red;
}
#inner-block {
background-color: lime;
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1>Firefox Intersection Observer Bug</h1>
<p>Open the console to see the results.</p>
<div id='block'>
<div id='inner-block'></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Bottom of the page.
</body>
</html>
The JavaScript for this page is:
const iobs = new IntersectionObserver((observations) => {
console.log('Intersection Ratio: ', observations[0].intersectionRatio);
});
const block = document.querySelector('#block');
iobs.observe(block);
Actual results:
Intersection Ratio: 0
Expected results:
Intersection Ratio: 1
(because the div is clearly on screen)
|
||
Comment 3•5 years ago
|
||
Emilio: Can you verify per spec? Seems broken; Chrome definitely gives a non-zero intersection ratio.
|
|
||
Updated•5 years ago
|
|
||
Comment 4•5 years ago
|
||
This is basically this, which I noticed while I was cleaning up IntersectionObserver.
There's bug 1581876 on file for this. I'll try to find some time this week to fix it.
|
|
||
Comment 5•5 years ago
|
||
This is not about "display: inline" on its own btw, this is about IB split (inlines broken by a block inside), which is all sadness in every browser :(
But anyhow bug 1581876 has a fix up for review now.
I really appreciate the code pointer, I haven't looked through this code before. Thanks!
Hi,
Firefox 81 is released now, and the problem still exists. You can produce it given the stackblitz I linked in the original bug report.
https://stackblitz.com/edit/rxjs-yo2jz5?file=index.html
If you open the console, you should see an intersection ratio of 1 printed, because the lime green rectangle is on screen; However, this always seems to print 0.
To confirm that it's not a bug in the reproduction, you can open the same stack blitz in Safari and Chrome, and you will see 1 printed to the console.
Let me know if I can be of further assistance,
Jon
|
|
||
Comment 8•5 years ago
|
||
There were actually two separate issues, and that test-case (only when ran in an iframe) shows it. That test-case also hits bug 1665447. You can test the latest nightly, which correctly prints the ratio of 1, and 81.0.1 will also have that fix.
Description
•