RubyGems - polymer-core-rails - Versions diffs - 0.2.0 → 0.2.5 - Mend

polymer-core-rails 0.2.0 → 0.2.5

Files changed (840) hide show

data/app/assets/components/core-overlay/tests/html/core-overlay-scroll.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!doctype html>
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>core-overlay</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../../webcomponentsjs/webcomponents.js"></script>
+  <script src="../../../polymer-test-tools/chai/chai.js"></script>
+  <script src="../../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../../core-transition/core-transition-css.html">
+  <link rel="import" href="../../core-overlay.html">
+  <style>
+    core-overlay {
+      width: 300px;
+      border: 1px solid black;
+      margin: 10px;
+      overflow: auto !important;
+    }
+    #content {
+      overflow: auto;
+    }
+  </style>
+</head>
+<body fullbleed unresolved>
+  <template is="auto-binding">
+    <core-overlay id="simple">
+        <div>Lots of Content that might overflow the overlay!</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+    </core-overlay>
+    <core-overlay id="sectioned" vertical layout sizingTarget="{{$.content}}">
+      <header>Stuff on top</header>
+      <section id="content">
+        <div>Lots of Content that might overflow the overlay!</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
+      </section>
+      <footer>Stuff on bottom</footer>
+    </core-overlay>
+  </template>
+  <script>
+    addEventListener('template-bound', function(e) {
+      // setup
+      var simple = document.querySelector('#simple');
+      var sectioned = document.querySelector('#sectioned');
+      function testWhenOpen(element, test, next) {
+        var l1 = function() {
+          test();
+          element.async(function() {
+            element.opened = false;
+          }, null, 1);
+        };
+        var l2 = function() {
+          element.removeEventListener('core-overlay-open-completed', l1);
+          element.removeEventListener('core-overlay-close-completed', l2);
+          next();
+        };
+        element.addEventListener('core-overlay-open-completed', l1);
+        element.addEventListener('core-overlay-close-completed', l2);
+        element.opened = true;
+      }
+      asyncSeries([
+        // scrolling overlay does not overflow
+        function(next) {
+          testWhenOpen(simple, function() {
+            var rect = simple.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        },
+        // scrolling overlay does not overflow
+        function(next) {
+          testWhenOpen(sectioned, function() {
+            var rect = sectioned.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        },
+        // positioned scrolling overlay does not overflow
+        function(next) {
+          sectioned.style.top = sectioned.style.right = '';
+          sectioned.style.left = '300px';
+          sectioned.style.bottom = '200px'
+          testWhenOpen(sectioned, function() {
+            var rect = sectioned.getBoundingClientRect();
+            chai.assert.ok(0 < rect.top + 10, 'overlay constrained to window size');
+            chai.assert.ok(0 < rect.left + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerWidth >= rect.right + 10, 'overlay constrained to window size');
+            chai.assert.ok(window.innerHeight >= rect.bottom + 10, 'overlay constrained to window size');
+          }, next);
+        }
+      ], done);
+    });
+  </script>
+</body>
+</html>
+</html>

data/app/assets/components/core-overlay/tests/js/htmltests.js ADDED Viewed

@@ -0,0 +1,6 @@
+htmlSuite('core-overlay', function() {
+  htmlTest('html/core-overlay-basic.html');
+  htmlTest('html/core-overlay-positioning.html');
+  htmlTest('html/core-overlay-positioning-margin.html');
+  htmlTest('html/core-overlay-scroll.html');
+});

data/app/assets/components/core-overlay/tests/runner.html ADDED Viewed

@@ -0,0 +1,14 @@
+<!doctype htmlz>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>Web Component Test Runner</title>
+  <script src="../../polymer-test-tools/ci-support.js"></script>
+</head>
+<body>
+  <script>
+    runTests('tests.json');
+  </script>
+</body>
+</html>

data/app/assets/components/core-overlay/tests/tests.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+	"tools": ["chai", "mocha-tdd"],
+	"tests": [
+		"js/htmltests.js"
+	]
+}

data/app/assets/components/core-pages/metadata.html CHANGED Viewed

@@ -22,4 +22,4 @@
 </x-meta>
-<x-meta id="section" isContainer isHidden></x-meta>
+<x-meta id="section" isContainer isHidden></x-meta>

data/app/assets/components/core-scaffold/core-scaffold.html CHANGED Viewed

@@ -23,13 +23,33 @@ Example:
         </core-menu>
       </core-header-panel>
       <div tool>Title</div>
-      <div>Content goes here...</div>
+      <div>Main content goes here...</div>
     </core-scaffold>
 Use `mode` to control the header and scrolling behavior of `core-header-panel`
-and `responsiveWidth` to change the layout of the scaffold.
+and `responsiveWidth` to change the layout of the scaffold.  Use 'disableSwipe'
+to disable swipe-to-open on toolbar.
-To have the content fits to the main area, use `fit` attribute.
+Use `rightDrawer` to move position of folding toolbar to the right instead of
+left (default).  This will also position content to the left of the menu button
+instead of the right.  You can use `flex` within your `tool` content to push the menu
+button to the far right:
+    <core-scaffold rightDrawer>
+      <div tool flex >Title</div>
+    </core-scaffold>
+You may also add `middle` or `bottom` classes to your `tool` content when using tall
+modes to adjust vertical content positioning in the core-toolbar (e.g. when using
+mode="waterfall-tall"):
+    <core-scaffold rightDrawer mode="waterfall-tall">
+      <div tool flex >Title</div>
+      <div tool horizontal layout flex center-justified class="middle">Title-middle</div>
+      <div tool horizontal layout flex end-justified class="bottom">Title-bottom</div>
+    </core-scaffold>
+To have the content fit to the main area, use `fit` attribute.
     <core-scaffold>
       <core-header-panel navigation flex mode="seamed">
@@ -79,7 +99,7 @@ To have the content fits to the main area, use `fit` attribute.
   </style>
-  <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" responsiveWidth="{{responsiveWidth}}">
+  <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="{{drawerWidth}}" rightDrawer="{{rightDrawer}}" responsiveWidth="{{responsiveWidth}}" disableSwipe="{{disableSwipe}}">
     <div vertical layout drawer>
@@ -87,11 +107,16 @@ To have the content fits to the main area, use `fit` attribute.
     </div>
-    <core-header-panel main mode="{{mode}}">
+    <core-header-panel id="headerPanel" main mode="{{mode}}">
       <core-toolbar>
-        <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        <template if="{{!rightDrawer}}">
+          <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        </template>
         <content select="[tool]"></content>
+        <template if="{{rightDrawer}}">
+          <core-icon-button id="menuButton" icon="menu" on-tap="{{togglePanel}}"></core-icon-button>
+        </template>
       </core-toolbar>
       <content select="*"></content>
@@ -105,7 +130,35 @@ To have the content fits to the main area, use `fit` attribute.
   Polymer('core-scaffold', {
+    /**
+     * Fired when the main content has been scrolled.  `event.detail.target` returns
+     * the scrollable element which you can use to access scroll info such as
+     * `scrollTop`.
+     *
+     *     <core-scaffold on-scroll="{{scrollHandler}}">
+     *       ...
+     *     </core-scaffold>
+     *
+     *
+     *     scrollHandler: function(event) {
+     *       var scroller = event.detail.target;
+     *       console.log(scroller.scrollTop);
+     *     }
+     *
+     * @event scroll
+     */
     publish: {
+      /**
+       * Width of the drawer panel.
+       *
+       * @attribute drawerWidth
+       * @type string
+       * @default '256px'
+       */
+      drawerWidth: '256px',
       /**
        * When the browser window size is smaller than the `responsiveWidth`,
        * `core-drawer-panel` changes to a narrow layout. In narrow layout,
@@ -116,6 +169,25 @@ To have the content fits to the main area, use `fit` attribute.
        * @default '600px'
        */
       responsiveWidth: '600px',
+      /**
+       * If true, position the drawer to the right. Also place menu icon to
+       * the right of the content instead of left.
+       *
+       * @attribute rightDrawer
+       * @type boolean
+       * @default false
+       */
+      rightDrawer: false,
+      /**
+       * If true, swipe to open/close the drawer is disabled.
+       *
+       * @attribute disableSwipe
+       * @type boolean
+       * @default false
+       */
+      disableSwipe: false,
       /**
        * Used to control the header and scrolling behaviour of `core-header-panel`
@@ -126,29 +198,52 @@ To have the content fits to the main area, use `fit` attribute.
        */
       mode: {value: 'seamed', reflect: true}
     },
+    ready: function() {
+      this._scrollHandler = this.scroll.bind(this);
+      this.$.headerPanel.addEventListener('scroll', this._scrollHandler);
+    },
+    detached: function() {
+      this.$.headerPanel.removeEventListener('scroll', this._scrollHandler);
+    },
     /**
-      * Toggle the drawer panel
-      * @method togglePanel
-      */
+     * Toggle the drawer panel
+     * @method togglePanel
+     */
     togglePanel: function() {
       this.$.drawerPanel.togglePanel();
     },
     /**
-      * Open the drawer panel
-      * @method openDrawer
-      */
+     * Open the drawer panel
+     * @method openDrawer
+     */
     openDrawer: function() {
       this.$.drawerPanel.openDrawer();
     },
     /**
-      * Close the drawer panel
-      * @method closeDrawer
-      */
+     * Close the drawer panel
+     * @method closeDrawer
+     */
     closeDrawer: function() {
       this.$.drawerPanel.closeDrawer();
+    },
+    /**
+     * Returns the scrollable element on the main area.
+     *
+     * @property scroller
+     * @type Object
+     */
+    get scroller() {
+      return this.$.headerPanel.scroller;
+    },
+    scroll: function(e) {
+      this.fire('scroll', {target: e.detail.target}, this, false);
     }
   });

data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html CHANGED Viewed

@@ -37,12 +37,11 @@ or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scr
     }
 `core-scroll-header-panel` works well with `core-toolbar` but can use any element
-that represents a header by adding a `core-header` class to it.  Use the attribute
-or class `content` to delineate the content section.
+that represents a header by adding a `core-header` class to it.
     <core-scroll-header-panel>
       <core-toolbar>Header</core-toolbar>
-      <div content>Content goes here...</div>
+      <div>Content goes here...</div>
     </core-scroll-header-panel>
 @group Polymer Core Elements
@@ -57,9 +56,9 @@ or class `content` to delineate the content section.
   <link rel="stylesheet" href="core-scroll-header-panel.css">
-  <div id="mainContainer" on-scroll="{{scroll}}">
+  <div id="mainContainer">
-    <content id="mainContent" select="[content], .content"></content>
+    <content id="mainContent" select=":not(core-toolbar):not(.core-header)"></content>
   </div>
@@ -76,6 +75,7 @@ or class `content` to delineate the content section.
 </template>
 <script>
+(function() {
   Polymer('core-scroll-header-panel', {
@@ -147,6 +147,7 @@ or class `content` to delineate the content section.
        *
        * @attribute headerHeight
        * @type number
+       * @default 0
        */
       headerHeight: 0,
@@ -158,6 +159,7 @@ or class `content` to delineate the content section.
        *
        * @attribute condensedHeaderHeight
        * @type number
+       * @default 0
        */
       condensedHeaderHeight: 0,
@@ -183,6 +185,15 @@ or class `content` to delineate the content section.
       'headerMargin fixed': 'setup'
     },
+    ready: function() {
+      this._scrollHandler = this.scroll.bind(this);
+      this.scroller.addEventListener('scroll', this._scrollHandler);
+    },
+    detached: function() {
+      this.scroller.removeEventListener('scroll', this._scrollHandler);
+    },
     domReady: function() {
       this.async('measureHeaderHeight');
     },
@@ -191,13 +202,25 @@ or class `content` to delineate the content section.
       return this.$.headerContent.getDistributedNodes()[0];
     },
+    /**
+     * Returns the scrollable element.
+     *
+     * @property scroller
+     * @type Object
+     */
     get scroller() {
       return this.$.mainContainer;
     },
+    /**
+     * Invoke this to tell `core-scroll-header-panel` to re-measure the header's
+     * height.
+     *
+     * @method measureHeaderHeight
+     */
     measureHeaderHeight: function() {
       var header = this.header;
-      if (this.header) {
+      if (header && header.offsetHeight) {
         this.headerHeight = header.offsetHeight;
       }
     },
@@ -276,8 +299,8 @@ or class `content` to delineate the content section.
     },
     translateY: function(s, y) {
-      s.transform = s.webkitTransform = y == null ? '' :
-          'translate3d(0, ' + y + 'px, 0)';
+      var t = y == null ? '' : 'translate3d(0, ' + y + 'px, 0)';
+      setTransform(s, t);
     },
     scroll: function(event) {
@@ -296,7 +319,7 @@ or class `content` to delineate the content section.
       }
       if (!event || !this.fixed && y !== this.y) {
-        requestAnimationFrame(this.transformHeader.bind(this, y));
+        this.transformHeader(y);
       }
       this.prevScrollTop = Math.max(sTop, 0);
@@ -308,6 +331,19 @@ or class `content` to delineate the content section.
     }
   });
+  //determine proper transform mechanizm
+  if (document.documentElement.style.transform !== undefined) {
+    var setTransform = function(style, string) {
+      style.transform = string;
+    }
+  } else {
+    var setTransform = function(style, string) {
+      style.webkitTransform = string;
+    }
+  }
+})();
 </script>
 </polymer-element>