Fix #77

awkward · May 7, 2015 · 91416fe · 91416fe
1 parent 3a3dc04
commit 91416fe
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 16 deletions.
diff --git a/backbone.modal-bundled-min.js b/backbone.modal-bundled-min.js
diff --git a/backbone.modal-bundled.js b/backbone.modal-bundled.js
diff --git a/backbone.modal-min.js b/backbone.modal-min.js
diff --git a/backbone.modal.js b/backbone.modal.js
diff --git a/backbone.modal.theme.css b/backbone.modal.theme.css
@@ -454,3 +454,7 @@
   -webkit-animation-fill-mode: both;
   -webkit-transform-origin: 50% 50%;
   -webkit-backface-visibility: hidden; }
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  .bbm-modal--open, .bbm-modal--stacked, .bbm-modal--stacked-reverse, .bbm-modal--destroy {
+    -webkit-animation: none !important; } }
diff --git a/src/backbone.modal.coffee b/src/backbone.modal.coffee
@@ -59,8 +59,8 @@
       if @keyControl
         # global events for key and click outside the modal
         Backbone.$('body').on('keyup.bbm', @checkKey)
-        Backbone.$('body').on('mouseup.bbm', @clickOutsideElement)
-        Backbone.$('body').on('click.bbm', @clickOutside)
+        @$el.on('mouseup.bbm', @clickOutsideElement)
+        @$el.on('click.bbm', @clickOutside)
 
       @modalEl.css(opacity: 1).addClass("#{@prefix}-modal--open")
       @onShow?()
@@ -264,8 +264,8 @@
 
     destroy: ->
       Backbone.$('body').off('keyup.bbm', @checkKey)
-      Backbone.$('body').off('mouseup.bbm', @clickOutsideElement)
-      Backbone.$('body').off('click.bbm', @clickOutside)
+      @$el.off('mouseup.bbm', @clickOutsideElement)
+      @$el.off('click.bbm', @clickOutside)
 
       Backbone.$('tester').remove()
 

diff --git a/src/backbone.modal.theme.sass b/src/backbone.modal.theme.sass
@@ -215,7 +215,6 @@
   -webkit-transform-origin: 50% 50%
   -webkit-backface-visibility: hidden
 
-
 /* Open a stacked modal */
 @-webkit-keyframes bbm-stacked
   0%
@@ -483,4 +482,10 @@
   -webkit-animation-timing-function: linear
   -webkit-animation-fill-mode: both
   -webkit-transform-origin: 50% 50%
-  -webkit-backface-visibility: hidden
+  -webkit-backface-visibility: hidden
+
+// Fix for iPad safari bug (-webkit-animation-fill-mode and click events)
+// Reference: https://github.com/awkward/backbone.modal/issues/77
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
+  .bbm-modal--open, .bbm-modal--stacked, .bbm-modal--stacked-reverse, .bbm-modal--destroy
+    -webkit-animation: none !important