Adds sidebar IoS detection for overflow. Fixes #1442, modal losing scroll position on mobile when package includes sidebar. #1320 issue with mobile scroll in docs

RELEASE-NOTES.md

@@ -5,7 +5,7 @@
 **Bugs**
 
 - **Step** - Fix issue with completed ordered step icon alignment
-
+- **Sidebar** - Mobile sidebars now only set ``overflow`` on page's ``html`` when browsing from ``iOS` devices. Using overflow caused issues with page's scroll being lost when resizing a browser to mobile widths. This also affected modules that used  `$(window).scrollTop()`` at mobile screen sizes
 
 ### Version 1.2.0 - December 08, 2014
 

src/definitions/modules/sidebar.js

@@ -18,6 +18,7 @@ $.fn.sidebar = function(parameters) {
     $allModules    = $(this),
     $window        = $(window),
     $document      = $(document),
+    $html          = $('html'),
     $head          = $('head'),
 
     moduleSelector = $allModules.selector || '',
@@ -48,6 +49,7 @@ $.fn.sidebar = function(parameters) {
         selector        = settings.selector,
         className       = settings.className,
         namespace       = settings.namespace,
+        regExp          = settings.regExp,
         error           = settings.error,
 
         eventNamespace  = '.' + namespace,
@@ -84,6 +86,10 @@ $.fn.sidebar = function(parameters) {
             settings.useLegacy = true;
           }
 
+          if(module.is.ios()) {
+            module.set.ios();
+          }
+
           id = module.get.uniqueID();
           elementNamespace = '.' + id;
 
@@ -419,7 +425,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
+          if(settings.transition == 'scale down') {
             module.scrollToTop();
           }
           module.set.transition();
@@ -561,6 +567,11 @@ $.fn.sidebar = function(parameters) {
         },
 
         set: {
+          // html
+          ios: function() {
+            $html.addClass(className.ios);
+          },
+
           // container
           pushed: function() {
             $context.addClass(className.pushed);
@@ -714,11 +725,23 @@ $.fn.sidebar = function(parameters) {
             document.body.removeChild(element);
             return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
           },
+          ios: function() {
+            var
+              userAgent = navigator.userAgent,
+              isIOS     = regExp.ios.test(userAgent)
+            ;
+            if(isIOS) {
+              module.verbose('Browser was found to be iOS', userAgent);
+              return true;
+            }
+            else {
+              return false;
+            }
+          },
           mobile: function() {
             var
               userAgent    = navigator.userAgent,
-              mobileRegExp = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/,
-              isMobile     = mobileRegExp.test(userAgent)
+              isMobile     = regExp.mobile.test(userAgent)
             ;
             if(isMobile) {
               module.verbose('Browser was found to be mobile', userAgent);
@@ -976,6 +999,7 @@ $.fn.sidebar.settings = {
     active    : 'active',
     animating : 'animating',
     dimmed    : 'dimmed',
+    ios       : 'ios',
     pushable  : 'pushable',
     pushed    : 'pushed',
     right     : 'right',
@@ -992,6 +1016,11 @@ $.fn.sidebar.settings = {
     sidebar : '.ui.sidebar'
   },
 
+  regExp: {
+    ios    : /(iPad|iPhone|iPod)/g,
+    mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
+  },
+
   error   : {
     method       : 'The method you called is not defined.',
     pusher       : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',

src/definitions/modules/sidebar.less

@@ -196,11 +196,15 @@
 }
 
 /*--------------
-     Mobile
+       iOS
 ---------------*/
 
+/*
+  iOS incorrectly sizes document when content
+  is presented outside of view with 2Dtranslate
+*/
 @media only screen and (max-width: @computerBreakpoint) {
-  html {
+  html.ios {
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
   }