Merge pull request #1497 from onfido/hotfix/camera-permissions-screen…

…-mobile-layout Hotfix/camera permissions screen mobile layout
onfido · Jul 8, 2021 · b926d49 · b926d49
2 parents 7f69a5a + c06a57b
commit b926d49
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 17 deletions.
diff --git 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

diff --git 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<Props> = ({ onNext, translate }) => (
-  <ScreenLayout
-    actions={
+  <div className={theme.fullHeightContainer}>
+    <PageTitle
+      title={translate('permission.title_cam')}
+      subTitle={translate('permission.subtitle_cam')}
+    />
+    <div className={classNames(style.bodyWrapper, theme.scrollableContent)}>
+      <div className={style.image}>
+        <div className={style.graphic} />
+      </div>
+      <p className={style.instructions}>{translate('permission.body_cam')}</p>
+    </div>
+    <div className={classNames(theme.contentMargin, style.actions)}>
       <Button
         variant="primary"
         className={classNames(theme['button-centered'], theme['button-lg'])}
@@ -27,21 +36,8 @@ const Permissions: FunctionComponent<Props> = ({ onNext, translate }) => (
       >
         {translate('permission.button_primary_cam')}
       </Button>
-    }
-  >
-    <div className={theme.fullHeightContainer}>
-      <PageTitle
-        title={translate('permission.title_cam')}
-        subTitle={translate('permission.subtitle_cam')}
-      />
-      <div className={classNames(style.bodyWrapper)}>
-        <div className={style.image}>
-          <div className={style.graphic} />
-        </div>
-        <p className={style.instructions}>{translate('permission.body_cam')}</p>
-      </div>
     </div>
-  </ScreenLayout>
+  </div>
 )
 
 export default trackComponent(localised(Permissions))
diff --git a/src/components/CameraPermissions/Primer/style.scss b/src/components/CameraPermissions/Primer/style.scss
@@ -17,15 +17,27 @@
   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;
+
+  // 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);
+
   @media (--small-viewport) {
     max-width: 79 * $unit-x-small;
   }
 }
 
 .reasons {
   font-size: var(--font-size-small);
+
   text-align: center;
   min-height: 42 * $unit-small;
 }
@@ -46,6 +58,7 @@
   @media (--small-viewport) {
     background-size: contain;
     flex-grow: 1; // prevents container height collapsing on iOS devices
+    height: 100%;
   }
 }
 

diff --git 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 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);
+
   @media (--small-viewport) {
     margin: 0 0 16 * $unit;
   }