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

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[Xavier Mouton-Dubosc]

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.

Comment 1

[Xavier Mouton-Dubosc]

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

Comment 2

[Emilio Cobos Álvarez [:emilio]]

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.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Testcase

Comment 4

[Emilio Cobos Álvarez [:emilio]]

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.

Comment 5

[Xavier Mouton-Dubosc]

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 !

Comment 6

[Ksenia Berezina [:ksenia]]

Attachment: 47761.html

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.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

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 :)

Comment 8

[Sean Voisen (:svoisen)]

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

Comment 9

[Ksenia Berezina [:ksenia]]

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

Comment 11

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1581876 - Fix IntersectionObserver's rect to include all continuations. r=mstange,dholbert

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.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8992f6cfc323
Fix IntersectionObserver's rect to include all continuations. r=mstange

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24818 for changes under testing/web-platform/tests

Comment 14

[jfrederic]

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. :-)

Comment 15

[Emilio Cobos Álvarez [:emilio]]

It should land for Firefox 81.

Comment 16

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/8992f6cfc323

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 18

[Mike Kaply [:mkaply]]

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

I'm working to get more info.