implement graceful degradation for iOS devices

Author: mikegreiling

README.md

@@ -87,6 +87,12 @@ Note that when specifying these options as html data-attributes, you should conv
 			<td>0</td>
 			<td>You can optionally set the parallax mirror element to extend a few pixels above and below the mirrored element.  This can hide slow or stuttering scroll events in certain browsers.</td>
 		</tr>
+		<tr>
+			<td>iosFix</td>
+			<td>boolean</td>
+			<td>true</td>
+			<td>iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation.</td>
+		</tr>
 	</tbody>
 </table>
 

parallax.js

@@ -1,5 +1,5 @@
 /*!
- * parallax.js v0.9.1 (http://pixelcog.github.io/parallax.js/)
+ * parallax.js v1.0 (http://pixelcog.github.io/parallax.js/)
  * Copyright (c) 2014 PixelCog, Inc.
  * Licensed under MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
  */
@@ -50,13 +50,25 @@
     }
 
     this.$element = $(element);
-    this.$mirror = $('<div />').prependTo('body');
-    this.$slider = $('<img />').prependTo(this.$mirror);
 
     if (!this.imageSrc && this.$element.is('img')) {
       this.imageSrc = this.$element.attr('src');
     }
 
+    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
+      if (this.iosFix && !this.$element.is('img')) {
+        this.$element.css({
+          backgroundImage: 'url(' + encodeURIComponent(this.imageSrc) + ')',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center'
+        });
+      }
+      return this;
+    }
+
+    this.$mirror = $('<div />').prependTo('body');
+    this.$slider = $('<img />').prependTo(this.$mirror);
+
     this.$mirror.addClass('parallax-mirror').css({
       visibility: 'hidden',
       zIndex: this.zIndex,
@@ -94,6 +106,7 @@
     speed:  0.2,
     bleed:  0,
     zIndex: -100,
+    iosFix: true,
 
     refresh: function() {
       this.boxWidth        = this.$element.width();