Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

#24408 Issue: Update _AutoHideScrollbar.pcss #10090

Closed
wants to merge 1 commit into from
Closed

#24408 Issue: Update _AutoHideScrollbar.pcss #10090

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion res/css/structures/_AutoHideScrollbar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ html {
}

::-webkit-scrollbar {
width: 6px;
width: 12px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't this make it very different between webkit and non-webkit browsers?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+ @akshattchhabra can you send screenshots before and after the changes? We should verify, that the scrollbars don't overlap with other content or break the layout. Someone should test the final solution with a non-webkit browser.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before:

image

After:

image

Here, I have attached the screenshots.

So, I checked the solution on a non-webkit browser. Yeah, you are right there would be differences between them and I checked about the possible solutions to make this compatible.

Solution:
To resolve this issue, we need to change the "scrollbar-width: thin" to "scrollbar-width: auto". This will work for the non-webkit browsers. Also, we need to completely remove the webkit-scrollbar css. This will ensure that the scrollbars are wide enough and identical for both kinds of browsers. Please find the attached screenshots for solution.

Webkit browser

image

non-webkit browser
image

This is what I think should be the solution. However, I am not sure if this is correct. Please suggest if you have any other solution.

height: 6px;
}

Expand Down