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

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+21 −1
Open

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
4 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
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
13 changes: 12 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 @@ -58,6 +58,9 @@ function App() {
const isAppLayout = isAppLayoutPage(pageId);
const ContentTag = isAppLayout ? 'div' : 'main';

const lowerCaseUserAgent = navigator.userAgent.toLowerCase();
const isSafari = lowerCaseUserAgent.indexOf('safari') > -1 && lowerCaseUserAgent.indexOf('chrome') === -1;

useEffect(() => {
applyMode(mode ?? null);
}, [mode]);
Expand All @@ -70,6 +73,14 @@ function App() {
disableMotion(motionDisabled);
}, [motionDisabled]);

useEffect(() => {
if (isSafari) {
document.body.classList.add(styles.safari);
} else {
document.body.classList.remove(styles.safari);
}
}, [isSafari]);

if (!mode) {
return <Redirect to="/light/" />;
}
Expand Down
9 changes: 9 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,15 @@ body {
caret-color: transparent !important;
}
// stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type

html:has(&.safari) {
// 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