1815822 - [CTW] Bounds incorrect for scrolled sticky/fixed position transformed display: flex element with calc style

Status: RESOLVED FIXED

(Core :: Disability Access APIs, defect)

Description

[Nathan LaPré]

STR:

1. Open the following page:

data:text/html,<div style="position:sticky; display:flex; top:calc(100vh - 30px);"><button tabindex="0">Back to Top</button></div><script> for (let i = 0; i < 1000; ++i) { const div = document.createElement("div"); div.innerHTML = `<button>${i}</button>`; document.body.append(div); } </script>

2. Examine the bounds of the "Back to Top" button's accessible.
3. Scroll down the page to the bottom.
4. Re-examine the bounds of the "Back to Top" button, as in step 2.

Expected results: The bounds are the same.
Actual results: The y-coordinate of the bounds in step 4 is very negative.

I found this bug by examining the "Back to Top" button on reddit.com. It uses roughly this exact styling to position a button that scrolls the user back to the top of the page. As you scroll down the site, the button's bounds become more and more incorrect.

The bug will be present whether using position: sticky or position: fixed.

Comment 1

[James Teh [:Jamie]]

I'm almost certain this will be fixed by bug 1814800. The problem is that the sticky div doesn't have an Accessible, but bug 1814800 will ensure that it does. If I give the outer div an id in Nightly, this fixes it, which seems to confirm my suspicions.

Comment 2

[Nathan LaPré]

Ah, my mistake, it seems that I narrowed the test case too far. If you add a transform to that outer div (which the Reddit case does), then the issue resurfaces, even when the outer div creates an accessible. See this revised test case, where I've added transform:translate(90%) and id="some-id") to the outer div:

data:text/html,<div style="position:sticky; display:flex; top:calc(100vh - 30px); transform:translate(90%)" id="some-id"><button tabindex="0">Back to Top</button></div><script> for (let i = 0; i < 1000; ++i) { const div = document.createElement("div"); div.innerHTML = `<button>${i}</button>`; document.body.append(div); } </script>

This appears to show the failure on Nightly, even though an accessible exists for the outer div.

Comment 3

[James Teh [:Jamie]]

I can't reproduce this on latest Nightly. Can you double check you're on latest Nightly? The only reason I ask is that bug 1814785 might have fixed this, which only landed 15 hours ago, so it'd probably only be in the very latest nightly.

Comment 4

[James Teh [:Jamie]]

If I'm right, the reason is that before bug 1814785, transforms translated to the parent. However, we don't update cached transforms when the position changes, so the (stale) transform would be translating us to the wrong place after scrolling. After bug 1814785, transforms no longer include translation to the parent, so they are unaffected by position changes.

Comment 5

[Nathan LaPré]

(In reply to James Teh [:Jamie] from comment #3)

I can't reproduce this on latest Nightly. Can you double check you're on latest Nightly? The only reason I ask is that bug 1814785 might have fixed this, which only landed 15 hours ago, so it'd probably only be in the very latest nightly.

Must've just missed the update last night, my bad! Yes, the updated test case works with latest Nightly. This is fixed. Thanks.