Polymer 1.0 paper-scroll-header-panel content wont scroll on iOS only

293 views
Skip to first unread message

aaron...@gmail.com

unread,
Jul 31, 2015, 1:49:22 AM7/31/15
to Polymer
I have run into what I think is a weird issue with scrolling in iOS.

I have a pretty basic app with html setup like this: 

<paper-scroll-header-panel condenses keep-condensed-header>
    <paper-toolbar class="tall layout horizontal" id="title-toolbar">
      <div class="bottom bottom-container horizontal layout">
        <div class="bottom-title paper-font-subhead">Title</div>
      </div>

    </paper-toolbar>
    <div id="content" class="content-dark">
      <div class="horizontal center-justified layout">
        <!-- some body content here -->
      </div>

      <paper-toolbar justify="center">
          <paper-tabs selected="{{selected}}" class="fit" scrollable>
              <paper-tab>1</paper-tab>
              <paper-tab>2</paper-tab>
              <paper-tab>3</paper-tab>
              <paper-tab>4</paper-tab>
          </paper-tabs>
      </paper-toolbar>
        <iron-pages selected="{{selected}}">
            <div><!-- page content --></div>
            <div><!-- page content --></div>
            <div><!-- page content --></div>
            <div><!-- page content --></div>
        </iron-pages>
    </div>
  </paper-scroll-header-panel>

On iOS when you click a paper-tab and the associated iron-page shows you are not able to scroll down...it just pulls the whole page up from the bottom as if the content didn't continue past the fold. However, if you click on another tab and then come back to the original tab it scrolls just fine...

At first I thought it might have something to do with my content-scroll event listeners but when I disabled them it still happened.

Has anyone experienced this?
Message has been deleted

aaron...@gmail.com

unread,
Jul 31, 2015, 3:46:55 AM7/31/15
to Polymer, aaron...@gmail.com

Edit: Previously, I had opted not to have a tab selected by default. However, when I decided to have a tab viewable on load via the below code I no longer ran into this issue. It still seems to be a problem though.

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
    var template = document.querySelector('template[is="dom-bind"]');
    template.selected = 0; // selected is an index by default
});
Reply all
Reply to author
Forward
0 new messages