old ios optimisations

idoco · Dec 10, 2018 · d64443b · d64443b
1 parent a8244c2
commit d64443b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 0 deletions.
diff --git a/css/chat.css b/css/chat.css
@@ -5,6 +5,7 @@ html, body {
     background: #e5e5e5;
     font-family: 'Lato', sans-serif;
     margin: 0 auto;
+    -webkit-overflow-scrolling: touch;
 }
 
 html, body,

diff --git a/src/widget/chat-frame.js b/src/widget/chat-frame.js
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import {mobileOpenWrapperStyle} from "./style";
 
 export default class ChatFrame extends Component {
 
@@ -17,6 +18,8 @@ export default class ChatFrame extends Component {
                         flex: '1',
                         width: '100%',
                         height: 0,
+                        // ios position fixed hack
+                        maxHeight: isMobile ? document.body.clientHeight : 'auto',
                     }}>
             </iframe>
         );

diff --git a/src/widget/style.js b/src/widget/style.js
@@ -35,6 +35,7 @@ export const mobileClosedWrapperStyle = {
 };
 
 export const mobileOpenWrapperStyle = {
+    '-webkit-overflow-scrolling': 'touch',
     display: 'flex',
     flexDirection: 'column',
     position: 'fixed',

diff --git a/src/widget/widget.js b/src/widget/widget.js
@@ -16,6 +16,7 @@ export default class Widget extends Component {
 
     constructor() {
         super();
+        this.scrollPosition = 0;
         this.state.isChatOpen = false;
         this.state.pristine = true;
         this.state.wasChatOpened = this.wasChatOpened();
@@ -73,6 +74,17 @@ export default class Widget extends Component {
             this.setCookie();
             stateData.wasChatOpened = true;
         }
+
+        // reset and restore scroll position for position fixed bug on old ios
+        if (this.props.isMobile) {
+            if (stateData.isChatOpen) {
+                this.scrollPosition = document.body.scrollHeight;
+                window.scrollTo(0, 0);
+            } else {
+                window.scrollTo(0, this.scrollPosition);
+            }
+        }
+
         this.setState(stateData);
     }