From d617ba1013880e21302f43d79f983884d2a1f816 Mon Sep 17 00:00:00 2001 From: Kimmi Gan Date: Wed, 7 Jul 2021 16:25:27 +0100 Subject: [PATCH 1/4] Revert "Fix camera permission screen text rendering issue on Safari" This reverts commit a0565bd5e6dea883616a703b9b0621bae3d843e8. --- .../CameraPermissions/Primer/index.tsx | 30 ++++++++----------- .../CameraPermissions/Primer/style.scss | 8 +++++ 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/src/components/CameraPermissions/Primer/index.tsx b/src/components/CameraPermissions/Primer/index.tsx index d0b3e24702..d26cbcb0ec 100644 --- a/src/components/CameraPermissions/Primer/index.tsx +++ b/src/components/CameraPermissions/Primer/index.tsx @@ -1,6 +1,5 @@ import { h, FunctionComponent } from 'preact' import classNames from 'classnames' -import ScreenLayout from 'components/Theme/ScreenLayout' import PageTitle from 'components/PageTitle' import { Button } from '@onfido/castor-react' import { trackComponent } from 'Tracker' @@ -17,8 +16,18 @@ type PermissionsProps = { type Props = PermissionsProps & WithLocalisedProps & WithTrackingProps const Permissions: FunctionComponent = ({ onNext, translate }) => ( - + +
+
+
+
+

{translate('permission.body_cam')}

+
+
- } - > -
- -
-
-
-
-

{translate('permission.body_cam')}

-
- +
) export default trackComponent(localised(Permissions)) diff --git a/src/components/CameraPermissions/Primer/style.scss b/src/components/CameraPermissions/Primer/style.scss index 372e845196..4ffdcaac85 100644 --- a/src/components/CameraPermissions/Primer/style.scss +++ b/src/components/CameraPermissions/Primer/style.scss @@ -17,8 +17,14 @@ height: auto; width: 100%; font-size: var(--font-size-small); + display: flex; + flex-direction: column; + flex: 2 1 32 * $unit-x-small; min-height: 32 * $unit-x-small; max-width: 105.01 * $unit-x-small; + width: 100%; + padding: 10 * $unit-small; + margin: auto; @media (--small-viewport) { max-width: 79 * $unit-x-small; } @@ -26,6 +32,7 @@ .reasons { font-size: var(--font-size-small); + text-align: center; min-height: 42 * $unit-small; } @@ -46,6 +53,7 @@ @media (--small-viewport) { background-size: contain; flex-grow: 1; // prevents container height collapsing on iOS devices + height: 100%; } } From 62dbe5371f8326fa9e42f899b92355a05cdc0f59 Mon Sep 17 00:00:00 2001 From: Kimmi Gan Date: Wed, 7 Jul 2021 16:30:20 +0100 Subject: [PATCH 2/4] Alternate method to fix Safari rendering issue on Camera Permission screen Avoids replacing existing layout with ScreenLayout component as that affects this screen's layout on some clients' host app/site --- src/components/CameraPermissions/Primer/style.scss | 5 +++++ src/components/PageTitle/style.scss | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/src/components/CameraPermissions/Primer/style.scss b/src/components/CameraPermissions/Primer/style.scss index 4ffdcaac85..9039658805 100644 --- a/src/components/CameraPermissions/Primer/style.scss +++ b/src/components/CameraPermissions/Primer/style.scss @@ -25,6 +25,11 @@ width: 100%; padding: 10 * $unit-small; margin: auto; + + // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite laye, + // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome + transform: translateZ(0); + @media (--small-viewport) { max-width: 79 * $unit-x-small; } diff --git a/src/components/PageTitle/style.scss b/src/components/PageTitle/style.scss index 5e642ee3aa..6d59ca8d57 100644 --- a/src/components/PageTitle/style.scss +++ b/src/components/PageTitle/style.scss @@ -29,6 +29,11 @@ .titleWrapper { margin: 32 * $unit 0 16 * $unit; flex-shrink: 0; + + // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite laye, + // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome + transform: translateZ(0); + @media (--small-viewport) { margin: 0 0 16 * $unit; } From bceff31ad670061af06fbf075f176e0bfd82ee27 Mon Sep 17 00:00:00 2001 From: Kimmi Gan Date: Wed, 7 Jul 2021 16:38:39 +0100 Subject: [PATCH 3/4] Update CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f48bf51aa..92f41dd789 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ This project adheres to the Node [default version scheme](https://docs.npmjs.com ## [next-version] +### Fixed + +- UI: Fixed Camera Permissions Primer screen rendering issue on Safari 14.1 (desktop) without changing existing SDK layout structure. + ## [6.10.1] - 2021-07-05 ### Changed From c06a57bb48ab23356de3c32f8b711fb02f41c9a9 Mon Sep 17 00:00:00 2001 From: Kimmi Gan Date: Thu, 8 Jul 2021 12:24:54 +0100 Subject: [PATCH 4/4] Fix typo in comments --- src/components/CameraPermissions/Primer/style.scss | 2 +- src/components/PageTitle/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CameraPermissions/Primer/style.scss b/src/components/CameraPermissions/Primer/style.scss index 9039658805..5147a1d491 100644 --- a/src/components/CameraPermissions/Primer/style.scss +++ b/src/components/CameraPermissions/Primer/style.scss @@ -26,7 +26,7 @@ padding: 10 * $unit-small; margin: auto; - // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite laye, + // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite layer, // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome transform: translateZ(0); diff --git a/src/components/PageTitle/style.scss b/src/components/PageTitle/style.scss index 6d59ca8d57..40e806da51 100644 --- a/src/components/PageTitle/style.scss +++ b/src/components/PageTitle/style.scss @@ -30,7 +30,7 @@ margin: 32 * $unit 0 16 * $unit; flex-shrink: 0; - // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite laye, + // To fix Safari flexbox rendering issue by forcing the div to be rendered in a new composite layer, // see https://stackoverflow.com/questions/65524383/flexbox-bug-on-safari -> https://stackoverflow.com/questions/19169089/weird-css-stretching-issue-in-ios7-safari-and-chrome transform: translateZ(0);