Even better fix for IOS11 bug!

client/js/campaigns/show/gift-option-button.js

@@ -3,18 +3,18 @@ const h = require('snabbdom/h')
 const branding = require('../../components/nonprofit-branding')
 const format = require('../../common/format')
 const soldOut = require('./is-sold-out')
-const on_ios11 = require('../../common/on-ios11')
-function prepareForIOS11()
-{
-    bad_elements = $('.ff-modalBackdrop')
-    for(var i = 0; i < bad_elements.length; i++)
-    {
-        bad_elements[i].classList.add('ios-force-absolute-positioning')
-    }
 
-
-    $('body').scrollTop(195) // so incredibly hacky
-}
+// function prepareForIOS11()
+// {
+//     bad_elements = $('.ff-modalBackdrop')
+//     for(var i = 0; i < bad_elements.length; i++)
+//     {
+//         bad_elements[i].classList.add('ios-force-absolute-positioning')
+//     }
+//
+//
+//     $('body').scrollTop(195) // so incredibly hacky
+// }
 
 
 module.exports = (state, gift) => {
@@ -26,10 +26,7 @@ module.exports = (state, gift) => {
       gift.amount_one_time
       ? h('td', [
           h('button.button--small.button--gift', {
-            on: {click: ev => { if (on_ios11()) {
-                prepareForIOS11()
-            }
-
+            on: {click: ev => {
 
 
                 state.clickOption$([gift, gift.amount_one_time, 'one-time'])}
@@ -45,9 +42,7 @@ module.exports = (state, gift) => {
     , gift.amount_recurring
       ? h('td', [
           h('button.button--small.button--gift', {
-            on: {click: ev =>  { if (on_ios11()) {
-                prepareForIOS11()
-            }
+            on: {click: ev =>  {
 
             state.clickOption$([gift, gift.amount_recurring, 'recurring'])}
             }

client/js/campaigns/show/page.js

@@ -25,16 +25,11 @@ require('../../common/fundraiser_metrics')
 require('../../components/fundraising/add_header_image')
 require('../../common/restful_resource')
 require('../../gift_options/index')
+const on_ios11 = require('../../common/on-ios11')
+const noScroll = require('no-scroll')
 appl.ajax_gift_options.index()
 
-function calculateIOS()
-{
-  var userAgent = window.navigator.userAgent;
-  var hasVersion11 = userAgent.search("Version/11.0") > 0
-  var has11_or_later = userAgent.search("OS 11_0_\d{1,2} like Mac OS X") > 0
 
-  return hasVersion11 && has11_or_later;
-}
 
 // Campaign editor only functionality
 if(app.current_campaign_editor) {
@@ -50,7 +45,6 @@ if(app.current_campaign_editor) {
 function init() {
   var state = { 
     timeRemaining$: timeRemaining(app.end_date_time, app.timezone),
-    onIOS11: calculateIOS()
   }
 
   console.error(window.navigator.userAgent)
@@ -97,6 +91,18 @@ function init() {
       flyd.map(R.always('chooseGiftOptionsModal'), clickContributeGifts$)
     , flyd.map(R.always('donationModal'), startWiz$))
 
+  flyd.on((id) => {
+    if (on_ios11() &&  id === null) {
+      noScroll.off()
+    }
+  }, state.modalID$)
+
+    flyd.on((id) => {
+        if (on_ios11() &&  id !== null) {
+            noScroll.on()
+        }
+    }, state.modalID$)
+
   // Stream of which gift option you have selected
   const giftOption$ = flyd.map(setGiftParams, state.giftOptions.clickOption$)
   const donateParam$ = flyd.scanMerge([

client/js/common/application_view.js

@@ -6,17 +6,7 @@ var moment = require('moment-timezone')
 var client = require('./client')
 var appl = require('view-script')
 const on_ios11 = require('./on-ios11')
-function prepareForIOS11(id)
-{
-    let bad_elements = $("#" + id)
-    for(var i = 0; i < bad_elements.length; i++)
-    {
-        bad_elements[i].classList.add('ios-force-absolute-positioning')
-    }
-
-
-    document.body.scrollTop = 0 // so incredibly hacky
-}
+const noScroll = require('no-scroll')
 
 module.exports = appl
 
@@ -42,7 +32,7 @@ appl.def('open_modal', function(modalId) {
 
 	$('body').addClass('is-showingModal')
     if (on_ios11()){
-        prepareForIOS11(modalId)
+        noScroll.on()
     }
 	return appl
 })
@@ -51,6 +41,9 @@ appl.def('open_modal', function(modalId) {
 appl.def('close_modal', function() {
 	$('.modal').removeClass('inView')
 	$('body').removeClass('is-showingModal')
+    if (on_ios11()) {
+        noScroll.off()
+    }
 	return appl
 })
 

client/js/events/show/page.js

@@ -13,14 +13,37 @@ const flyd = require('flyd')
 const R = require('ramda')
 const render = require('ff-core/render')
 const modal = require('ff-core/modal')
+const noScroll = require('no-scroll')
+
+const on_ios11 = require('../../common/on-ios11')
+
+function createClickListener(startWiz$){
+    return (...props) => {
+        if (on_ios11())
+        {
+            noScroll.on()
+        }
+        startWiz$(...props)
+    }
+
+
+}
 
 // -- Flim flam root component for event pages
 function init() {
   var state = { }
   const startWiz$ = flyd.stream()
   const donateButtons = document.querySelectorAll('.js-openDonationModal')
-  R.map(x => x.addEventListener('click', startWiz$), donateButtons)
+  R.map(x => x.addEventListener('click', createClickListener(startWiz$)), donateButtons)
   state.modalID$ = flyd.map(R.always('donationModal'), startWiz$)
+  flyd.on((id) => {
+      if (on_ios11() &&  id ===null ){
+           noScroll.off()
+      }}, state.modalID$)
+    flyd.on((id) => {
+        if (on_ios11() && id !==null){
+            noScroll.on()
+        }}, state.modalID$)
   state.donateWiz = donateWiz.init(flyd.stream({event_id: app.event_id}))
   return state
 }

package-lock.json

@@ -10811,6 +10811,12 @@
         "lower-case": "1.1.4"
       }
     },
+    "no-scroll": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz",
+      "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ==",
+      "dev": true
+    },
     "node-fetch": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",

package.json

@@ -59,6 +59,7 @@
     "mobx-react": "^5.0.0",
     "mobx-react-devtools": "^5.0.1",
     "mobx-react-form": "^1.34.0",
+    "no-scroll": "^2.1.0",
     "phantomjs-prebuilt": "2.1.12",
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^9.1.0",