Demonstration
JSFiddle Code
HTML
<!doctype html>
<head>
<title>Why doesn't this work right in Firefox?</title>
</head>
<body>
<section>
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</section>
</body>
CSS
section {
width: 100%;
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
div {
width: 100%;
height: 100vh;
scroll-snap-stop: always;
scroll-snap-align: center;
overflow: hidden;
}
h1 {
line-height: 100vh;
font-size: 100vh;
text-align: center;
padding: 0;
margin: 0;
}
div:nth-of-type(1) {
background-color: #FF0000;
}
div:nth-of-type(2) {
background-color: #00FF00;
}
div:nth-of-type(3) {
background-color: #0000FF;
}
div:nth-of-type(4) {
background-color: #00FFFF;
}
div:nth-of-type(5) {
background-color: #FF00FF;
}
Problem Description
I have been trying to implement a simple scroll-snapping slideshow, but no matter what I have tried to do Firefox always eventually starts slowing down and stopping mid-transition, scrolling far more slowly than if scroll-snap were disabled.
Firefox for Android has similarly poor performance. Although it doesn't stop mid-transition on Android, it does sometimes take two swipes for it to even respond at all.
I have searched SO questions regarding this, but haven't found any that quite describe what I'm experiencing. That makes me think it may be a problem that is specific to my hardware rather than Firefox, but it is still a problem that only occurs in Firefox and not in Chrome.
I tried to investigate with the performance analyzer
Environment
- Dell XPS-15 9560
- Linux Mint 21.2 (Cinnamon 64 bit)
- Also experienced in Windows 11 on the same machine
- No longer installed, so I can't get version information.
- Firefox Version 116.0.2 (64 bit)
- Samsung Galaxy S21 5G
- Android 13
- Firefox 116.2.0
Performance Analysis Output
Nothing in these two instances of jank that I zoomed in on seems to be remarkable, but maybe eyes more experienced than mine can see what's up. This is from a different run than is shown in the YouTube link, but the behavior is the same.
Scrolling Down
Scrolling Up
