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

Fix to css Zoom not working in safari #21069

Merged
merged 8 commits into from
Feb 16, 2023
Merged

Fix to css Zoom not working in safari #21069

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
efc8ce1
checks if browser is safari
FlynnFc Feb 13, 2023
ebdad2e
Update browserSupportsCssZoom.ts
FlynnFc Feb 13, 2023
e2376f7
Update browserSupportsCssZoom.ts
FlynnFc Feb 13, 2023
e3e80ed
added back type exception
FlynnFc Feb 13, 2023
a3831ba
comments explaining regex and requested changes
FlynnFc Feb 13, 2023
7f95742
build error fix
FlynnFc Feb 13, 2023
bd38eef
removing unused import
FlynnFc Feb 13, 2023
03bbffa
Update code/ui/components/src/Zoom/browserSupportsCssZoom.ts
FlynnFc Feb 14, 2023
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
9 changes: 5 additions & 4 deletions code/ui/components/src/Zoom/browserSupportsCssZoom.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { global } from '@storybook/global';

export function browserSupportsCssZoom(): boolean {
try {
// @ts-expect-error (we're testing for browser support)
return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
// Checks if safari or firefox is being used.
// This check can be removed when zoom becomes standard css. Currently firefox does not support it and there is a bug in safari see here: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom#browser_compatibility
// regex checks if there are other browsers because "safari" is also present when using chrome or an android browser whilst on mac/iPhone see more here : https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#which_part_of_the_user_agent_contains_the_information_you_are_looking_for
const isCompatible = /^((?!chrome|android).)*safari|firefox/i.test(navigator.userAgent);
return isCompatible;
} catch (error) {
return false;
}
Expand Down