bug(cross-browser): scrollbar isn’t showing in new versions of Firefox, Safari and in all modern mobile browsers if default configuration

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:

<!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:

Gemini scrollbar MCVE on Firefox 99

Gemini scrollbar demo page on Firefox 99

3.2. Actual

Firefox 100:

Gemini scrollbar MCVE Firefox 100

Gemini scrollbar demo page on 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:
1. Chrome 120
2. Edge 120
3. Firefox 120
4. Opera 105
macOS Sonoma:
1. Safari 17
Google Pixel 8 Pro, Android 14:
1. Chrome
2. Edge
Samsung Galaxy S23 Ultra, Android 13:
1. Firefox
iPhone 15
1. Safari 17.2

Thanks.

noeldelgado / gemini-scrollbar