fix(sticky-headers): add feature detection

Closes #290

ionic/components/item/item-group.ts

@@ -1,7 +1,8 @@
 import {Directive, ElementRef, Host, Optional} from 'angular2/angular2';
 import {Content} from '../content/content';
 import {throttle} from '../../util/util';
-import {position, offset, CSS} from '../../util/dom';
+import {position, offset, CSS, raf} from '../../util/dom';
+import {FeatureDetect} from '../../util/feature-detect';
 import {IonicConfig} from '../../config/config';
 
 /**
@@ -38,15 +39,16 @@ export class ItemGroupTitle {
    * TODO
    * @param {ElementRef} elementRef  TODO
    */
-  constructor(elementRef: ElementRef, config: IonicConfig, content: Content) {
+  constructor(elementRef: ElementRef, config: IonicConfig, content: Content, featureDetect: FeatureDetect) {
     this.isSticky = true;
     this.content = content;
     this.ele = elementRef.nativeElement;
     this.parent = this.ele.parentNode;
+    this.isCssValid = featureDetect.has('positionsticky')
   }
 
   onInit() {
-    if(!this.content) { return; }
+    if (!this.content || this.isCssValid) { return; }
 
     this.scrollContent = this.content.elementRef.nativeElement.children[0];
 
@@ -55,7 +57,6 @@ export class ItemGroupTitle {
     this.scrollTransition = 0;
     this.isSticking = false;
 
-
     this.scrollContent.addEventListener('scroll', event => this.scrollEvent(event));
 
     this.calculateScrollLimits = scrollTop => {
@@ -98,9 +99,7 @@ export class ItemGroupTitle {
       this.applyTransform(element, translateDyPixelsUp);
     }
     else {
-      // see http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+      raf( a => this.applyTransform(element, translateDyPixelsUp) );
-      // see http://ionicframework.com/docs/api/utility/ionic.DomUtil/
-      requestAnimationFrame( a => this.applyTransform(element, translateDyPixelsUp) );
     }
   }
 

ionic/config/bootstrap.ts

@@ -14,6 +14,7 @@ import {Events} from '../util/events';
 import {NavRegistry} from '../components/nav/nav-registry';
 import {Translate} from '../translation/translate';
 import {ClickBlock} from '../util/click-block';
+import {FeatureDetect} from '../util/feature-detect';
 import {TapClick} from '../components/tap-click/tap-click';
 import * as dom from '../util/dom';
 
@@ -34,8 +35,9 @@ export function ionicProviders(config) {
 
   let events = new Events();
   let tapClick = new TapClick(app, config, window, document);
+  let featureDetect = new FeatureDetect();
 
-  setupDom(window, document, config, platform);
+  setupDom(window, document, config, platform, featureDetect);
   bindEvents(window, document, platform, events);
 
   // prepare the ready promise to fire....when ready
@@ -46,6 +48,7 @@ export function ionicProviders(config) {
     provide(IonicConfig, {useValue: config}),
     provide(IonicPlatform, {useValue: platform}),
     provide(TapClick, {useValue: tapClick}),
+    provide(FeatureDetect, {useValue: featureDetect}),
     provide(Events, {useValue: events}),
     IonicForm,
     IonicKeyboard,
@@ -61,7 +64,7 @@ export function ionicProviders(config) {
 }
 
 
-function setupDom(window, document, config, platform) {
+function setupDom(window, document, config, platform, featureDetect) {
   let bodyEle = document.body;
   if (!bodyEle) {
     return dom.ready(function() {
@@ -96,22 +99,8 @@ function setupDom(window, document, config, platform) {
     bodyEle.classList.add('enable-hover');
   }
 
-  /**
+  // run feature detection tests
-  * Hairline Shim
+  featureDetect.run(window, document);
-  * Add the "hairline" CSS class name to the body tag
-  * if the browser supports subpixels.
-  */
-  if (window.devicePixelRatio >= 2) {
-    var hairlineEle = document.createElement('div');
-    hairlineEle.style.border = '.5px solid transparent';
-    bodyEle.appendChild(hairlineEle);
-
-    if (hairlineEle.offsetHeight === 1) {
-      bodyEle.classList.add('hairlines');
-    }
-    bodyEle.removeChild(hairlineEle);
-  }
-
 }
 
 

ionic/util/feature-detect.ts

@@ -0,0 +1,51 @@
+
+export class FeatureDetect {
+
+  run(window, document) {
+    this._results = {};
+    for (let name in featureDetects) {
+      this._results[name] = featureDetects[name](window, document, document.body);
+    }
+  }
+
+  has(featureName) {
+    return !!this._results[featureName];
+  }
+
+  static add(name, fn) {
+    featureDetects[name] = fn;
+  }
+
+}
+
+let featureDetects = {};
+
+
+FeatureDetect.add('positionsticky', function(window, document) {
+  // css position sticky
+  let ele = document.createElement('div');
+  ele.style.cssText = 'position:-webkit-sticky;position:sticky';
+  return ele.style.position.indexOf('sticky') > -1;
+});
+
+
+FeatureDetect.add('hairlines', function(window, document, body) {
+  /**
+  * Hairline Shim
+  * Add the "hairline" CSS class name to the body tag
+  * if the browser supports subpixels.
+  */
+  let canDo = false;
+  if (window.devicePixelRatio >= 2) {
+    var hairlineEle = document.createElement('div');
+    hairlineEle.style.border = '.5px solid transparent';
+    body.appendChild(hairlineEle);
+
+    if (hairlineEle.offsetHeight === 1) {
+      body.classList.add('hairlines');
+      canDo = true;
+    }
+    body.removeChild(hairlineEle);
+  }
+  return canDo;
+});