Merge pull request #9 from mobify/ios9-scroll-fix

Update scroll fix to include iOS8 and greater
mobify · Sep 14, 2015 · 8e5db9f · 8e5db9f
2 parents 925c82f + 3dc84ba
commit 8e5db9f
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 23 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,3 +1,8 @@
+1.0.4
+    - Fix scroll issue regression with iOS9 (PR #9)
+    - Rename package to mobify-capturejs to avoid conflict with capturejs npm
+      package
+
 1.0.3
     - Fix issues with having <body> in a script tag above the real
       body tag.

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -96,27 +96,32 @@ module.exports = function(grunt) {
                             browserName: 'firefox',
                             version: '18.0'
                         },
-                        { // Highest FF on OSX
-                            browserName: 'firefox',
-                            platform: 'Mac 10.6',
-                            version: '14.0'
+                        {
+                            browserName: 'ipad',
+                            platform: 'OS X 10.10',
+                            version: '9.0'
                         },
-                        { // Lowest iPad on OSX (simulator)
+                        {
                             browserName: 'ipad',
-                            platform: 'Mac 10.6',
-                            version: '4.3'
+                            platform: 'OS X 10.10',
+                            version: '8.4'
+                        },
+                        {
+                            browserName: 'iphone',
+                            platform: 'OS X 10.10',
+                            version: '9.0'
                         },
-                        { // Highest iPad on OSX (simulator)
+                        {
+                            browserName: 'iphone',
+                            platform: 'OS X 10.10',
+                            version: '8.4'
+                        },
+                        {
                           // NOTE: iOS 6 is available, but it hangs on SauceLabs...
                             browserName: 'ipad',
                             platform: 'Mac 10.6',
                             version: '5'
                         },
-                        { // Lowest iPhone on OSX (simulator)
-                            browserName: 'iphone',
-                            platform: 'Mac 10.6',
-                            version: '4.3'
-                        },
                         { // Highest iPhone on OSX (simulator)
                           // NOTE: iOS 6 is available, but it hangs on SauceLabs...
                             browserName: 'iphone',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "capturejs",
-  "version": "1.0.3",
+  "name": "mobify-capturejs",
+  "version": "1.0.4",
   "devDependencies": {
     "grunt": "~0.4.0",
     "grunt-browserify": "~1.3.1",

diff --git a/src/capture.js b/src/capture.js
@@ -389,6 +389,17 @@ Capture.isIOS8_0 = function() {
     return IOS8_REGEX.test(window.navigator.userAgent);
 };
 
+var IOS_REGEX = /ip(?:hone|od|ad).*Version\/(\d{1,2})\.\d/i;
+Capture.isIOS8OrGreater = function(ua) {
+    if (typeof ua !== 'string') {
+        return;
+    }
+
+    var match = ua.match(IOS_REGEX);
+
+    return match ? match[1] >= 8 : false;
+};
+
 /**
  * This is a feature detection function to determine if you
  * can construct body using innerHTML. In iOS8, setting
@@ -411,7 +422,7 @@ Capture.isSetBodyInnerHTMLBroken = function(){
 };
 
 /**
- * iOS 8.0 has a bug where dynamically switching the viewport (by swapping the
+ * iOS 8.0+ has a bug where dynamically switching the viewport (by swapping the
  * viewport meta tag) causes the viewport to automatically scroll. When
  * capturing, the initial document never has an active meta viewport tag.
  * Then, the rendered document injects one causing the aforementioned scroll.
@@ -424,7 +435,7 @@ Capture.isSetBodyInnerHTMLBroken = function(){
  * Open Radar: http://www.openradar.me/radar?id=5516452639539200
  * WebKit Bugzilla: https://bugs.webkit.org/show_bug.cgi?id=136904
  */
-Capture.ios8_0ScrollFix = function(doc, callback) {
+Capture.ios8AndGreaterScrollFix = function(doc, callback) {
     // Using `getElementsByTagName` here because grabbing head using
     // `document.head` will throw exceptions in some older browsers (iOS 4.3).
     var head = doc.getElementsByTagName('head');
@@ -552,8 +563,8 @@ Capture.prototype.render = function(htmlString) {
         });
     };
 
-    if (Capture.isIOS8_0()) {
-        Capture.ios8_0ScrollFix(document, write);
+    if (Capture.isIOS8OrGreater(window.navigator.userAgent)) {
+        Capture.ios8AndGreaterScrollFix(document, write);
     } else {
         write();
     }

diff --git a/tests/capture-tests.js b/tests/capture-tests.js
@@ -248,7 +248,7 @@ require(["mobifyjs/utils", "capture"], function(Utils, Capture) {
         var head = document.createElement('head');
         html.appendChild(head);
 
-        Capture.ios8_0ScrollFix(html, function() {
+        Capture.ios8AndGreaterScrollFix(html, function() {
             var meta = html.getElementsByTagName('meta')[0]
 
             ok(true,
@@ -498,4 +498,35 @@ require(["mobifyjs/utils", "capture"], function(Utils, Capture) {
         $("#qunit-fixture").append($iframe);
     });
 
+    test("isIOS8OrGreater returns true for iOS agents running iOS 8 or greater only", function() {
+        // iOS
+        var iOS7 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53';
+        var iOS8 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4';
+        var iOS9 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A340 Safari/601.1';
+        var fauxIOS9_1 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.1 Mobile/13A340 Safari/601.1';
+        var fauxIOS10 = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/10.0 Mobile/13A340 Safari/601.1';
+
+        // Android
+        var nexus4 = 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.122 Mobile Safari/537.36';
+        var galaxyS6 = 'Mozilla/5.0 (Linux; Android 5.0.2; SAMSUNG SM-G925F Build/LRX22G) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/3.0 Chrome/38.0.2125.102 Mobile Safari/537.36';
+
+        // Windows Phone
+        var lumia520 = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)';
+        var windowsPhone10 = 'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; DEVICE INFO) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Mobile Safari/537.36 Edge/12';
+
+        ok(!Capture.isIOS8OrGreater(iOS7), 'iOS 7.0');
+        ok(Capture.isIOS8OrGreater(iOS8), 'iOS 8.0');
+        ok(Capture.isIOS8OrGreater(iOS9), 'iOS 9.0');
+        ok(Capture.isIOS8OrGreater(fauxIOS9_1), 'iOS 9.1');
+        ok(Capture.isIOS8OrGreater(fauxIOS10), 'iOS 10.0');
+
+        ok(!Capture.isIOS8OrGreater(nexus4), 'Nexus 4 - Android 4.4');
+        ok(!Capture.isIOS8OrGreater(galaxyS6), 'Galaxy S6 - Android 5.0.2');
+
+        ok(!Capture.isIOS8OrGreater(windowsPhone10), 'Lumia 520 - Windows Phone 8');
+        ok(!Capture.isIOS8OrGreater(windowsPhone10), 'Windows Phone 10');
+
+        ok(!Capture.isIOS8OrGreater('lorem ipsum mobile browser 9.0'), 'Nonsense');
+    });
+
 });
diff --git a/tests/fixtures/smart-banner-below-tag.html b/tests/fixtures/smart-banner-below-tag.html
@@ -18,13 +18,18 @@
         Capture.init(function(capture){
             capture.renderCapturedDoc();
         });
-    } else {
-        // Tell parent we are ready
-        parent.postMessage("finished", "*");
     }
 });</script>
 <!-- END MOBIFY TAG -->
     <meta name="apple-itunes-app" content="app-id=284882215">
+    <script>
+        var capturing = window.Mobify && window.Mobify.capturing || false;
+
+        if (!capturing) {
+            // Tell parent we are ready
+            parent.postMessage("finished", "*");
+        }
+    </script>
 </head>
 
 <body>