Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Kristinita opened this issue Dec 23, 2023 · 0 comments
Open

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

Kristinita opened this issue Dec 23, 2023 · 0 comments

Comments

@Kristinita
Copy link

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:

  1. HTML sources
  2. 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:

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.

  1. Windows 11:

    1. Chrome 120
    2. Edge 120
    3. Firefox 120
    4. Opera 105

  2. macOS Sonoma:

    1. Safari 17

  3. Google Pixel 8 Pro, Android 14:

    1. Chrome
    2. Edge

  4. Samsung Galaxy S23 Ultra, Android 13:

    1. Firefox

  5. iPhone 15

    1. Safari 17.2

Thanks.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Kristinita