1. Summary
If default Gemini scrollbar configuration, the default body scrollbar of the browser is shown instead of the custom Gemini scrollbar in Firefox since version 100, Safari since version 7.1 and in all modern mobile browsers.
For the latest Chrome, Opera and Edge versions at the time of writing this issue default configuration works as expected.
2. MCVE
This MCVE on Repl.it:
- HTML sources
- HTML in browser
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kira Gemini scrollbar MCVE</title>
<script src="https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gemini-scrollbar/gemini-scrollbar.min.css">
<style>
html {
height: 100%;
}
.gm-scrollbar.-vertical {
width: 2rem;
background-color: red;
}
.gm-scrollbar .thumb {
background-color: blue;
}
p {
margin-bottom: 200rem;
}
</style>
<script>
window.onload = function () {
var scrollbar = new GeminiScrollbar({
element: document.querySelector("body")
}).create();
};
</script>
</head>
<body>
<p>Kira Goddess!</p>
<p>Kira Genius!</p>
<p>Kira Hero!</p>
<p>Kira Amazing!</p>
</body>
</html>For Gemini scrollbar demo page I get the same behavior as for MCVE.
3. Behavior
In Firefox, Gemini scrollbars with default configuration stopped working after Firefox 100 was released in May 2022.
3.1. Expected
Firefox 99:
3.2. Actual
Firefox 100:
4. Browsers
I tested MCVE and Gemini scrollbar demo page in the latest browsers at the time of writing this issue, using BrowserStack Live.
-
Windows 11:
- Chrome 120
- Edge 120
- Firefox 120
- Opera 105
-
macOS Sonoma:
- Safari 17
-
Google Pixel 8 Pro, Android 14:
- Chrome
- Edge
-
Samsung Galaxy S23 Ultra, Android 13:
- Firefox
-
iPhone 15
- Safari 17.2
Thanks.
1. Summary
If default Gemini scrollbar configuration, the default body scrollbar of the browser is shown instead of the custom Gemini scrollbar in Firefox since version 100, Safari since version 7.1 and in all modern mobile browsers.
For the latest Chrome, Opera and Edge versions at the time of writing this issue default configuration works as expected.
2. MCVE
This MCVE on Repl.it:
For Gemini scrollbar demo page I get the same behavior as for MCVE.
3. Behavior
In Firefox, Gemini scrollbars with default configuration stopped working after Firefox 100 was released in May 2022.
3.1. Expected
Firefox 99:
3.2. Actual
Firefox 100:
4. Browsers
I tested MCVE and Gemini scrollbar demo page in the latest browsers at the time of writing this issue, using BrowserStack Live.
Windows 11:
macOS Sonoma:
Google Pixel 8 Pro, Android 14:
Samsung Galaxy S23 Ultra, Android 13:
iPhone 15
Thanks.