From 8c5d6fe6672ef201598d846a1f42f71d54341c97 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 8 Oct 2019 05:59:45 -0700
Subject: [PATCH] fix: remove iOS sticky workaround (#1556)

I'm not sure what changed, but #667 no longer seems to be an issue, so
it looks like we can safely remove this workaround. I even tested in a
simulator in iOS 11.4 and we don't seem to be affected anymore.
---
 .../compose/ComposeStickyButton.html          | 76 ++-----------------
 src/scss/global.scss                          |  5 --
 2 files changed, 8 insertions(+), 73 deletions(-)

diff --git a/src/routes/_components/compose/ComposeStickyButton.html b/src/routes/_components/compose/ComposeStickyButton.html
index 7c2db601..221a8405 100644
--- a/src/routes/_components/compose/ComposeStickyButton.html
+++ b/src/routes/_components/compose/ComposeStickyButton.html
@@ -1,5 +1,5 @@
 <div class="compose-box-button-sentinel" ref:sentinel></div>
-<div class="compose-box-button-wrapper {showSticky ? 'compose-box-button-sticky' : ''} {hideAndFadeIn}"
+<div class="{computedClass}"
      ref:wrapper >
   <ComposeButton {overLimit} {sticky} on:click="onClickButton()" />
 </div>
@@ -27,29 +27,17 @@
     z-index: 5000;
     top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
   }
-
-  @supports (-webkit-overflow-scrolling: touch) {
-    .compose-box-button-sticky {
-      /* disable sticky positioning on iOS due to
-         https://github.com/nolanlawson/pinafore/issues/667 */
-      position: relative;
-      z-index: 0;
-      top: 0;
-    }
-  }
 </style>
 <script>
   import ComposeButton from './ComposeButton.html'
   import { store } from '../../_store/store'
   import { importShowComposeDialog } from '../dialog/asyncDialogs'
   import { observe } from 'svelte-extras'
-
-  const USE_IOS_WORKAROUND = process.browser && CSS.supports('-webkit-overflow-scrolling', 'touch')
+  import { classname } from '../../_utils/classname'
 
   export default {
     oncreate () {
       this.setupIntersectionObservers()
-      this.setupIOSWorkaround()
     },
     ondestroy () {
       this.teardownIntersectionObservers()
@@ -59,7 +47,12 @@
       sticky: false
     }),
     computed: {
-      timelineInitialized: ({ $timelineInitialized }) => $timelineInitialized
+      timelineInitialized: ({ $timelineInitialized }) => $timelineInitialized,
+      computedClass: ({ showSticky, hideAndFadeIn }) => (classname(
+        'compose-box-button-wrapper',
+        showSticky && 'compose-box-button-sticky',
+        hideAndFadeIn
+      ))
     },
     methods: {
       observe,
@@ -77,59 +70,6 @@
       async showDialog () {
         (await importShowComposeDialog())()
       },
-      setupIOSWorkaround () {
-        // This is an elaborate fix for https://github.com/nolanlawson/pinafore/issues/667
-        // We detect iOS using support for -webkit-overflow-scrolling: touch
-        // (both here and in global.scss). Then, we set the main content element
-        // to be overflow-x: hidden, which normally would break the sticky button
-        // because its parent is now the scrolling context. So for iOS only, we
-        // create a fake sticky button by listening to intersecting events
-        // and inserting a permanently fixed-position element into the DOM.
-        const { showSticky } = this.get()
-        if (!USE_IOS_WORKAROUND || !showSticky) {
-          return
-        }
-
-        const cleanup = () => {
-          const existingElement = document.getElementById('the-sticky-button')
-          if (existingElement) {
-            document.body.removeChild(existingElement)
-          }
-          if (this.__fixedStickyButton) {
-            this.__fixedStickyButton.destroy()
-            this.__fixedStickyButton = null
-          }
-        }
-
-        const createFixedStickyButton = () => {
-          const element = document.createElement('div')
-          element.setAttribute('id', 'the-sticky-button')
-          element.classList.add('compose-box-button-wrapper')
-          element.classList.add('compose-box-button-fixed')
-          document.body.appendChild(element)
-          const rect = this.refs.wrapper.getBoundingClientRect()
-          Object.assign(element.style, {
-            left: `${rect.left}px`,
-            position: 'fixed'
-          })
-          this.__fixedStickyButton = new ComposeButton({
-            target: element,
-            data: {
-              sticky: true,
-              overLimit: false
-            }
-          })
-          this.__fixedStickyButton.on('click', () => this.showDialog())
-        }
-
-        this.observe('sticky', sticky => {
-          cleanup()
-          if (sticky) {
-            createFixedStickyButton()
-          }
-        })
-        this.on('destroy', () => cleanup())
-      },
       setupIntersectionObservers () {
         const sentinel = this.refs.sentinel
 
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 8441b226..4d635b4c 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -20,11 +20,6 @@ body {
 
 .main-content {
   contain: content; // see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content
-  // these paddings should be kept in sync with getMainTopMargin.js
-  @supports (-webkit-overflow-scrolling: touch) {
-    // fixes iOS Safari horizontal scrolling (see https://github.com/nolanlawson/pinafore/issues/667)
-    overflow-x: hidden;
-  }
   padding-top: var(--main-content-pad-top);
 }