1656710 - elm.getBoundingClientRect().top returning intermittent wrong value on scroll event

Status: RESOLVED INCOMPLETE

(Core :: DOM: CSS Object Model, defect)

Description

[Christian S.]

Attachment: within scroll event -> console.log( document.getElementById('navContainer').getBoundingClientRect().top );

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0

Steps to reproduce:

I believe it was an update with Firefox which allowed for this issue to appear. I can replicate on 80.0b2 64 although not on 81.0a1 nightly (2020-08-01) 64. I first noticed it yesterday and I did not change any source code before experiencing this. I have another website which relies on offset().top which is experiencing the same issue too.

This issue can be replicated here: https://headliner-theme.nationbuilder.com/

As you scroll down far enough, when the nav has gotten to about the middle of the page, the nav will then toggle from absolute to fixed. This is because, within the scroll event, there is an if statement which will lock the nav to the top once the user has scrolled down far enough. This functionality is reliant on determining the offset of an element to the top of the view.

Actual results:

I have a site in which the nav will stick to the top of the view once the user has scrolled down the page far enough. I have a scroll event which triggers the nav to go from absolute to fixed. All of this is reliant on determining the offset of the nav to the top of the page. Consoling out, I am finding that sometimes the offSet of the nav from the top will return zero before the nav has actually arrived to the top. The result is the nav being toggled from absolute to fixed many times within a single scroll. I cannot replicate on any other browser or on FF nightly.

Expected results:

The actual offset top should be returned rather than something which is false.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I think this is bug 1655398, which should be in the next beta. Thanks for filing though!

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Hmm, wait, that's only clientTop, not getBoundingClientRect... Is there any chance you could attach a test-case that reproduces the issue here?

Comment 3

[Christian S.]

I've spent a few hours on this by now without being able to reproduce outside of my dev environment in which I originally found the issue. The direction in which I believe this is going is that within a scroll event the offset was being collected on each scroll rather than the offset when the page loads. Sorry, I wish I could assist further although I must continue the overall task at hand. If I get some time later on I'll see about digging back into this. Thanks.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Changing status to UNCONFIRMED. We definitely need a reproducible test case.

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Christian S. from comment #3)

I've spent a few hours on this by now without being able to reproduce outside of my dev environment in which I originally found the issue.

Given this, I don't know that we can usefully investigate this issue, unfortunately.

--> Closing as INCOMPLETE for now, but please reopen if you come up with a testcase or at least steps that we could use to reliably reproduce.

(Thanks in any case for taking the time to report the issue!)