[PR #5816] [MERGED] fix: broken scroll on latest chrome versions #5364

New issue

Closed

opened 2026-03-17 02:49:04 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:49:04 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5816
Author: @mayank-jain-1010
Created: 1/29/2026
Status: ✅ Merged
Merged: 2/3/2026
Merged by: @jamesgeorge007

Base: patch ← Head: fix/broken-scroll-from-chrome-major-version-144

📝 Commits (2)

017e664 chore: apply overscroll-none selectively to root
4d0a76b chore: add coverage to admin and desktop package

📊 Changes

3 files changed (+6 additions, -6 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/styles.scss (+2 -2)
📝 packages/hoppscotch-desktop/src/assets/scss/styles.scss (+2 -2)
📝 packages/hoppscotch-sh-admin/assets/scss/styles.scss (+2 -2)

📄 Description

Closes #5815

This update fixes broken scroll functionality in Google Chrome versions >= 144.X.X.X

Root Cause

Google Chrome Major Version 144 (January 2026) introduced stricter enforcement of overscroll-behaviour: none, which prevents scroll events entirely on scroll containers. The global application of this property via the * selector caused scrollable elements in some components to become non-functional.

Affected Areas:

Collections List - cannot scroll through collections (or) requests
Environment Selector Dropdown - cannot scroll through environments

What's changed

Moved overscroll-behaviour: none from global * container to only :root
This is because :root is the viewport scroll container which prevents page bounce (desired behaviour)

Note to reviewers

Video demonstrating the fix:

https://github.com/user-attachments/assets/ebbad22a-bfb6-4b5c-95a5-4d1155d24938

While this issue fixes it on Google Chrome, there's a difference on Safari that I want to point out:

https://github.com/user-attachments/assets/97b67cbf-e941-4426-abce-c9382b94bbee

If you carefully observe, there's a bounce effect that's observed at the component level in some cases. This behaviour is not observed in the latest versions of Google Chrome.

References

Google Chrome Release Notes for Major Version 144
Tailwind Docs for overscroll-behaviour

Summary by cubic

Fixes broken scrolling in Chrome 144+ by applying overscroll-none only to :root instead of globally. Restores scrolling in lists and dropdowns while keeping viewport bounce disabled.

Bug Fixes
- Collections list scroll works again.
- Environment selector dropdown scroll works again.

^{Written for commit 4d0a76b9dd. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5816 **Author:** [@mayank-jain-1010](https://github.com/mayank-jain-1010) **Created:** 1/29/2026 **Status:** ✅ Merged **Merged:** 2/3/2026 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `patch` ← **Head:** `fix/broken-scroll-from-chrome-major-version-144` --- ### 📝 Commits (2) - [`017e664`](https://github.com/hoppscotch/hoppscotch/commit/017e66479ffc29287cf6f0120c783da757c5d960) chore: apply overscroll-none selectively to root - [`4d0a76b`](https://github.com/hoppscotch/hoppscotch/commit/4d0a76b9dd114232312cd9d8bb9f5a8bd5cc91bb) chore: add coverage to admin and desktop package ### 📊 Changes **3 files changed** (+6 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/styles.scss` (+2 -2) 📝 `packages/hoppscotch-desktop/src/assets/scss/styles.scss` (+2 -2) 📝 `packages/hoppscotch-sh-admin/assets/scss/styles.scss` (+2 -2) </details> ### 📄 Description **Closes #5815** This update fixes broken scroll functionality in **Google Chrome versions >= 144.X.X.X** ## Root Cause **Google Chrome Major Version 144 (January 2026)** introduced stricter enforcement of `overscroll-behaviour: none`, which prevents scroll events entirely on scroll containers. The global application of this property via the `*` selector caused scrollable elements in some components to become non-functional. <img width="1509" height="504" alt="image" src="https://github.com/user-attachments/assets/ee18ec68-c8fd-4a79-a62a-2130e0861c7b" /> **Affected Areas:** - Collections List - cannot scroll through collections (or) requests - Environment Selector Dropdown - cannot scroll through environments ## What's changed - Moved `overscroll-behaviour: none` from global `*` container to only `:root` - This is because `:root` is the viewport scroll container which prevents page bounce (desired behaviour) ### Note to reviewers **Video demonstrating the fix:** https://github.com/user-attachments/assets/ebbad22a-bfb6-4b5c-95a5-4d1155d24938 While this issue fixes it on Google Chrome, there's a difference on Safari that I want to point out: https://github.com/user-attachments/assets/97b67cbf-e941-4426-abce-c9382b94bbee - If you carefully observe, there's a bounce effect that's observed at the component level in some cases. This behaviour is not observed in the latest versions of Google Chrome. ## References [Google Chrome Release Notes for Major Version 144](https://developer.chrome.com/release-notes/144) [Tailwind Docs for overscroll-behaviour](https://tailwindcss.com/docs/overscroll-behavior)  --- ## Summary by cubic Fixes broken scrolling in Chrome 144+ by applying overscroll-none only to :root instead of globally. Restores scrolling in lists and dropdowns while keeping viewport bounce disabled. - **Bug Fixes** - Collections list scroll works again. - Environment selector dropdown scroll works again. <sup>Written for commit 4d0a76b9dd114232312cd9d8bb9f5a8bd5cc91bb. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>