Closed Bug 1581876 Opened 5 years ago Closed 4 years ago

IntersectionObserverEntry.intersectionRatio on ib split only accounts for the first continuation

Categories

(Core :: Layout, defect, P3)

71 Branch
defect

Tracking

()

RESOLVED FIXED
81 Branch
Tracking Status
firefox81 --- fixed

People

(Reporter: xaviermd, Assigned: emilio)

References

(Blocks 1 open bug)

Details

Attachments

(2 files, 1 obsolete file)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0

Steps to reproduce:

On my webpage ( https://cpu.dascritch.net ) , I replaced 2 onscroll+getBoundingClientRect with IntersectionObserver().observe() on 2 elements : a standard tag and a webcomponent.
But the IntersectionObserverEntry returned for the webcomponent doesn't behaviour as for the standard tag.

With this snippet injected on my page :

function check(elements) {
          console.log(elements[0].intersectionRatio, elements[0].isIntersecting, elements[0])
}
new IntersectionObserver(check).observe(document.getElementById('menu'));
new IntersectionObserver(check).observe(document.querySelector('cpu-audio'));

Scrolling to the bottom of the page, hiding the web-component "cpu-audio" , intersectionRatio in the console is at 0
Then scroll back to the top of the page.

Actual results:

when the "cpu-audio" webcomponent is reappearing, intersectionRatio is still on 0 and intersectionRect.width is also on 0, whereas intersectionRatio on the "menu" tag is > 0.

Expected results:

As in Chrome, when scrolling back on the top of the page, intersectionRatio should have been back > 0 for the web-component.

(related bug for my own archive : https://github.com/dascritch/cpu-15/issues/20 )

Component: Untriaged → Layout
Product: Firefox → Core

It's not related to be a webcomponent, but about the display value.

If you have display: block, then it works as expected... This is because <cpu-audio> is an inline with a block inside.

Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: IntersectionObserverEntry.intersectionRatio on WebComponent may be miscalculated → IntersectionObserverEntry.intersectionRatio on ib split may be miscalculated
Attached file Testcase
Priority: -- → P3
Summary: IntersectionObserverEntry.intersectionRatio on ib split may be miscalculated → IntersectionObserverEntry.intersectionRatio on ib split only accounts for the first continuation

I want to do this after bug 1551716. I actually had noticed this when going through the code there, see the FIXME comments added in https://phabricator.services.mozilla.com/D31151.

  // FIXME(emilio, mstange): Spec uses `getBoundingClientRect()` (which is the
  // union of all continuations), but this code doesn't handle continuations.
Depends on: 1551716

Oh sorry !
That's also an issue from my side. I'll correct it.

Have a nice day, thanks a lot for the amazing job !

Attached file 47761.html (obsolete) —

Wonder if this bug is related https://github.com/webcompat/web-bugs/issues/47761

I've attached a reduced test case. In Chrome intersectionRatio for the second image is greater than 0 and in Firefox is 0.
In RDM this is happening to the 4th image.

Once I add display: block to .simply-img then it works.
Also, if I comment out font-family, it works.

That doesn't sound related. There's no IB-split involved. That being said, now my IntersectionObserver simplification did land, I should try to find some time to fix this and investigate that issue.

Mind finding another bug for that Ksenia, and needinfo? me? Thanks so much :)

Hi Ksenia — Did you ever get a chance to file a bug for comment 6?

Flags: needinfo?(kberezina)

Sorry, I missed the comment. Just filed https://bugzilla.mozilla.org/show_bug.cgi?id=1614452

Flags: needinfo?(kberezina)
Attachment #9122493 - Attachment is obsolete: true
Flags: needinfo?(emilio)
Assignee: nobody → emilio
Flags: needinfo?(emilio)

This does the same thing that getBoundingClientRect() does, which is
what the spec asks for, and thus fixes the intersection ratio for split
inlines where the first continuation is empty for example.

Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8992f6cfc323
Fix IntersectionObserver's rect to include all continuations. r=mstange
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24818 for changes under testing/web-platform/tests

Thanks for submitting the fix! For us novices, how do we track the deployment of the fix? I'd like to know what Firefox release will have this, so I can take care of workarounds on my end. :-)

It should land for Firefox 81.

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 81 Branch
Upstream PR merged by moz-wptsync-bot
Blocks: 1665447

We have a report this broke Blackboard which is a pretty major educational tool right now.

I'm working to get more info.

Regressions: 1668113
Regressions: 1667521
No longer blocks: 1665447
Regressions: 1665447
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: