Skip to content

chore: hide scrollbars in dev pages when motion is disabled on Safari #3303

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

Merged
merged 9 commits into from
Feb 27, 2025
Merged

chore: hide scrollbars in dev pages when motion is disabled on Safari #3303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f4fad8e
Revert "chore: Do not hide scrollbars in dev pages in Mac OS (#3168)"
jperals Feb 19, 2025
6220097
Merge branch 'main' into chore/macos-hide-scrollbars
jperals Feb 21, 2025
4156fb5
Hide the scrollbars only in Safari
jperals Feb 21, 2025
8175d31
Merge branch 'main' into chore/macos-hide-scrollbars
jperals Feb 21, 2025
010747b
Avoid useEffect
jperals Feb 24, 2025
64f1f40
Merge branch 'main' into chore/macos-hide-scrollbars
jperals Feb 24, 2025
33287a4
Merge branch 'main' into chore/macos-hide-scrollbars
jperals Feb 27, 2025
3e91b03
Add comment
jperals Feb 27, 2025
c34c4ed
Merge branch 'main' into chore/macos-hide-scrollbars
jperals Feb 27, 2025
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
11 changes: 10 additions & 1 deletion pages/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import StrictModeWrapper from './components/strict-mode-wrapper';
// import font-size reset and Ember font
import '@cloudscape-design/global-styles/index.css';
// screenshot test overrides
import './styles.scss';
import styles from './styles.scss';

interface GlobalFlags {
appLayoutWidget?: boolean;
Expand Down Expand Up @@ -99,6 +99,15 @@ window[awsuiGlobalFlagsSymbol].appLayoutToolbar = appLayoutToolbar;
// Apply the direction value to the HTML element dir attribute
document.documentElement.setAttribute('dir', direction);

// Apply Safari-specific class to hide flaky scrollbars in tests
const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;
if (isSafari) {
document.body.classList.add(styles.safari);
} else {
document.body.classList.remove(styles.safari);
}

render(
<HashRouter>
<AppContextProvider>
Expand Down
10 changes: 10 additions & 0 deletions pages/app/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,16 @@ body {
caret-color: transparent !important;
}
// stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type

// Target the HTML element (not just the body) in order to include page-level scrollbars
html:has(&.safari) {
Copy link
Member

Choose a reason for hiding this comment

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

Two questions:

  1. Where & points to? <html> or <body> tag?
  2. Would it be possible to set ::-webkit-scrollbar on body rather than html so it would make the selector simpler?
body.safari::-webkit-scrollbar {
  inline-size: 0;
  block-size: 0;
}

Copy link
Member Author

Choose a reason for hiding this comment

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

  1. & expands to the parent selector. So in this case the selector becomes html:has(:global(.awsui-motion-disabled).safari)
  2. This is on purpose, because there are scrollbars at the page level, and we want to hide them too. Just double-checked on Safari that targeting the html element instead of body is needed for this

Copy link
Member

Choose a reason for hiding this comment

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

Makes sense. I think we can add this conversation as a comment on top of the selector. Just to have a bit more context around it.

Copy link
Member Author

Choose a reason for hiding this comment

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

OK, added a comment

// Hide scrollbars in Safari for stable screenshot tests
// stylelint-disable-next-line @cloudscape-design/no-implicit-descendant
::-webkit-scrollbar {
inline-size: 0;
block-size: 0;
}
}
}

/*
Expand Down
Loading