1911902 - mandatory scroll-snap-type requires multiple keypresses with non-integer pixel dimensions

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[Aidan Hall]

Attachment: The example in the description, as a file

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

Steps to reproduce:

I created a scroll snapping container with a height that was a non-integer number of pixels, with scroll-snap-type: y mandatory, and children with height: 100%, like so:

<style>
.container {
outline: 1px dashed;
height: 256.1px;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.container > div {
scroll-snap-align: start;
height: 100%;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

This is relevant because normally I'd want to use relative units like em and vh for dimensions, and these usually result in fractional numbers of pixels.

Actual results:

After pressing the down arrow ↓ once to go from 1 to 2, I have to press it twice to go from 2 to 3, although this does not happen when scrolling back up.

Expected results:

Pressing the up or down arrow exactly once triggers scrolling to the previous/next element.

Comment 1

[Aidan Hall]

(In reply to Aidan Hall from comment #0)

Created attachment 9418022 [details]
The example in the description, as a file

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

Steps to reproduce:

I created a scroll snapping container with a height that was a non-integer number of pixels, with scroll-snap-type: y mandatory, and children with height: 100%, like so:

<style>
.container {
outline: 1px dashed;
height: 256.1px;
scroll-snap-type: y mandatory;
overflow-y: scroll;
}
.container > div {
scroll-snap-align: start;
height: 100%;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

This is relevant because normally I'd want to use relative units like em and vh for dimensions, and these usually result in fractional numbers of pixels.

Actual results:

After pressing the down arrow ↓ once to go from 1 to 2, I have to press it twice to go from 2 to 3, although this does not happen when scrolling back up.

Expected results:

Pressing the up or down arrow exactly once triggers scrolling to the previous/next element.

Comment 2

[Aidan Hall]

Also, I checked and this seems to still happen even if the child elements are set up to have an integer height (e.g. with height: round(down, 100%, 1px)): the issue is with the size of the container.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Thanks for filing this bug and thanks for the test case. I really appreciate it!

So on my end, the issue doesn't happen if I wait for a couple of seconds before pressing the arrow key. So I suppose when the issue happens the previous smooth scrolling is still in progress. In fact with "general.smoothScroll=false" I don't see this bug at all.