Merge pull request #76 from Typeform/dist459

fix(DIST-459): Remove iOS resize hack that is no longer needed
Typeform · Oct 5, 2020 · 49b4c6e · 49b4c6e
2 parents dccf687 + a2b02bf
commit 49b4c6e
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 106 deletions.
diff --git a/src/core/make-fullscreen.js b/src/core/make-fullscreen.js
@@ -1,8 +1,6 @@
 import {
   appendParamsToUrl,
   ensureMetaViewport,
-  applyIOSFooterHack,
-  applyIOSIframeResizeHack,
   replaceExistingKeys,
   redirectToUrl,
   noop,
@@ -36,14 +34,7 @@ export default function makeFullScreen (iframe, url, options) {
 
   ensureMetaViewport()
 
-  // Fix scroll inside the iframe (renderer v1)
   iframe.onload = () => {
-    setTimeout(() => {
-      iframe.style.height = ''
-      applyIOSFooterHack(iframe)
-      applyIOSIframeResizeHack(iframe)
-    }, 1)
-
     iframe.contentWindow.focus()
   }
 

diff --git a/src/core/utils/index.js b/src/core/utils/index.js
@@ -1,10 +1,5 @@
 import UrlParse from 'url-parse'
 
-import {
-  isMobile,
-  isSafari,
-  isIOSDevice
-} from './mobile-detection'
 import onMessage from './message-propagation'
 
 export const checkEmbedId = (embedId, event) => event.detail && event.detail.embedId === embedId
@@ -94,23 +89,6 @@ export const isElementInViewport = el => {
   )
 }
 
-// RD-712
-export const fixSafariScroll = iframe => {
-  if (isMobile(navigator.userAgent) || !isSafari(navigator.userAgent)) {
-    return
-  }
-
-  iframe.addEventListener('load', () => {
-    return setTimeout(() => {
-      const originalHeight = window.getComputedStyle(iframe).height
-      iframe.setAttribute('height', `${iframe.offsetHeight + 1}px`)
-      return setTimeout(() => {
-        iframe.setAttribute('height', originalHeight)
-      }, 1)
-    }, 1000)
-  })
-}
-
 export const debounce = (func, wait, context) => {
   let timeout
   return (...args) => {
@@ -124,29 +102,6 @@ export const debounce = (func, wait, context) => {
   }
 }
 
-// Fix RD-731, footer not fully visible on iOS devices
-export const applyIOSFooterHack = element => {
-  if (!isIOSDevice(navigator.userAgent)) {
-    return
-  }
-
-  element.setAttribute('scrolling', 'no')
-  element.style.height = '1px'
-  element.style.minHeight = '100%'
-}
-
-export const applyIOSIframeResizeHack = element => {
-  if (!isIOSDevice(navigator.userAgent)) {
-    return
-  }
-
-  element.style.maxHeight = '100%'
-  element.style.maxWidth = '100%'
-  element.style.minHeight = '100%'
-  element.style.minWidth = '100%'
-  element.style.width = 0
-}
-
 export const noop = () => null
 
 export const omit = (key, object) => {

diff --git a/src/core/utils/mobile-detection.js b/src/core/utils/mobile-detection.js
@@ -5,11 +5,3 @@ export const isScreenBig = () => {
 export const isMobile = ua => {
   return /mobile|tablet|android/i.test(ua.toLowerCase())
 }
-
-export const isSafari = ua => {
-  return /^((?!chrome|android).)*safari/i.test(ua.toLowerCase())
-}
-
-export const isIOSDevice = ua => {
-  return /ip(hone|od|ad)/i.test(ua.toLowerCase())
-}
diff --git a/src/core/utils/mobile-detection.spec.js b/src/core/utils/mobile-detection.spec.js
@@ -8,15 +8,5 @@ describe('Mobile detection', () => {
       const result = mobileDetection.isMobile(fixture.ua)
       expect(result).toEqual(fixture.isMobile)
     })
-
-    it(`${fixture.name} should return ${fixture.isMobile} for isSafari`, () => {
-      const result = mobileDetection.isSafari(fixture.ua)
-      expect(result).toEqual(fixture.isSafari)
-    })
-
-    it(`${fixture.name} should return ${fixture.isMobile} for isIOSDevice`, () => {
-      const result = mobileDetection.isIOSDevice(fixture.ua)
-      expect(result).toEqual(fixture.isIOSDevice)
-    })
   })
 })
diff --git a/src/core/views/components/iframe.js b/src/core/views/components/iframe.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { applyIOSFooterHack, applyIOSIframeResizeHack } from '../../utils'
 import embedPermissions from '../../utils/embed-permissions'
 
 class Iframe extends Component {
@@ -21,22 +20,8 @@ class Iframe extends Component {
     this.iframeRef = node
   }
 
-  // Fixes scroll not responding in renderer v1
   handleLoad () {
-    if (!this.iframeRef) {
-      return
-    }
-    this.iframeRef.style.height = `${this.iframeRef.offsetHeight + 1}px`
-    setTimeout(() => {
-      if (!this.iframeRef) {
-        return
-      }
-      this.iframeRef.style.height = ''
-      applyIOSFooterHack(this.iframeRef)
-      applyIOSIframeResizeHack(this.iframeRef)
-
-      this.props.onLoad && this.props.onLoad(this.iframeRef)
-    }, 1)
+    this.props.onLoad && this.props.onLoad(this.iframeRef)
   }
 
   render () {

diff --git a/test/fixtures.js b/test/fixtures.js
@@ -27,37 +27,25 @@ export const urls = [{
 export const userAgents = [{
   name: 'Safari iOS 10 (iPhone)',
   ua: 'Mozilla/5.0 (iPod touch; CPU iPhone OS 10_2_1 like Mac OS X) AppleWebKit/602.4.6 (KHTML, like Gecko) Version/10.0 Mobile/14D27 Safari/602.1',
-  isMobile: true,
-  isSafari: true,
-  isIOSDevice: true
+  isMobile: true
 }, {
   name: 'Chrome mobile (Nexus)',
   ua: 'Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19',
-  isMobile: true,
-  isSafari: false,
-  isIOSDevice: false
+  isMobile: true
 }, {
   name: 'Safari iOS 9 (iPad)',
   ua: 'Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B137 Safari/601.1',
-  isMobile: true,
-  isSafari: true,
-  isIOSDevice: true
+  isMobile: true
 }, {
   name: 'Chrome iOS 9 (iPhone)',
   ua: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1 (KHTML, like Gecko) CriOS/56.0.2924.87 Mobile/13B143 Safari/601.1.46',
-  isMobile: true,
-  isSafari: true, // ?
-  isIOSDevice: true
+  isMobile: true
 }, {
   name: 'Edge Windows',
   ua: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240',
-  isMobile: false,
-  isSafari: false,
-  isIOSDevice: false
+  isMobile: false
 }, {
   name: 'Safari Mac OS',
   ua: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A',
-  isMobile: false,
-  isSafari: true,
-  isIOSDevice: false
+  isMobile: false
 }]
diff --git a/webpack.config.js b/webpack.config.js
@@ -106,6 +106,13 @@ function getWebpackConfig () {
       all: false,
       assets: true,
       errors: true
+    },
+
+    devServer: {
+      allowedHosts: [
+        // uncomment the following line for access from BrowserStack devices
+        // 'bs-local.com'
+      ]
     }
   }
 }