From efc8ce1b6892e3b1d913eb7331d5a03ebb1316db Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 13:01:26 +0000 Subject: [PATCH 1/8] checks if browser is safari --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 2c8e2e7168e0..273dda5e5ccc 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -3,7 +3,9 @@ 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; + if (window.safari) { + return false + } else return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; } catch (error) { return false; } From ebdad2edcf632ee71b3f33e10939fe63f7fea737 Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 13:08:26 +0000 Subject: [PATCH 2/8] Update browserSupportsCssZoom.ts --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 273dda5e5ccc..bb42ab65b29c 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -2,10 +2,11 @@ import { global } from '@storybook/global'; export function browserSupportsCssZoom(): boolean { try { + const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); // @ts-expect-error (we're testing for browser support) - if (window.safari) { - return false - } else return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; + if (!isSafari) { + return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; + } else return false } catch (error) { return false; } From e2376f74f44995f8db9a29b81fee4c9130417bc2 Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 13:47:03 +0000 Subject: [PATCH 3/8] Update browserSupportsCssZoom.ts --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index bb42ab65b29c..1f3f66922a9c 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -3,7 +3,6 @@ import { global } from '@storybook/global'; export function browserSupportsCssZoom(): boolean { try { const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - // @ts-expect-error (we're testing for browser support) if (!isSafari) { return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; } else return false From e3e80ed7552bb3863754e072407a38e86f19e83a Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 14:12:45 +0000 Subject: [PATCH 4/8] added back type exception --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 1f3f66922a9c..5b1e10c7fabf 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -4,8 +4,10 @@ export function browserSupportsCssZoom(): boolean { try { const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); if (!isSafari) { + // @ts-expect-error (we're testing for browser support) return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; - } else return false + } + return false; } catch (error) { return false; } From a3831ba0307d653ce6197b31e74c3fc1638ac92b Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 23:25:37 +0000 Subject: [PATCH 5/8] comments explaining regex and requested changes --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 5b1e10c7fabf..1297823d518d 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -2,12 +2,11 @@ import { global } from '@storybook/global'; export function browserSupportsCssZoom(): boolean { try { - const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); - if (!isSafari) { - // @ts-expect-error (we're testing for browser support) - return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; - } - return false; + // 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 bronwers because "safari" is also present when using chrome or an andriod 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; } From 7f9574248ba40e553b2a349706a2d01f41a648ae Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 23:33:00 +0000 Subject: [PATCH 6/8] build error fix --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 1297823d518d..e77890d72dc2 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -5,7 +5,7 @@ export function browserSupportsCssZoom(): boolean { // 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 bronwers because "safari" is also present when using chrome or an andriod 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); + const isCompatible = /^((?!chrome|android).)*safari|firefox/i.test(navigator.userAgent); return isCompatible; } catch (error) { return false; From bd38eef80779d5b4a6d0b6c98f1de631bd9042dd Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Mon, 13 Feb 2023 23:53:35 +0000 Subject: [PATCH 7/8] removing unused import --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index e77890d72dc2..289113367e60 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -1,5 +1,3 @@ -import { global } from '@storybook/global'; - export function browserSupportsCssZoom(): boolean { try { // Checks if safari or firefox is being used. From 03bbffa95f88e2ead339b45f21cabb6275743e7f Mon Sep 17 00:00:00 2001 From: Flynn <88561679+FlynnFc@users.noreply.github.com> Date: Tue, 14 Feb 2023 08:16:20 +0000 Subject: [PATCH 8/8] Update code/ui/components/src/Zoom/browserSupportsCssZoom.ts Co-authored-by: Norbert de Langen --- code/ui/components/src/Zoom/browserSupportsCssZoom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 289113367e60..6e1282b9414c 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -2,7 +2,7 @@ export function browserSupportsCssZoom(): boolean { try { // 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 bronwers because "safari" is also present when using chrome or an andriod 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 + // 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) {