paper-ripple fires on touch rather than selected

[Darin Hensley]

stack overflow cross post:

http://stackoverflow.com/questions/34011372/paper-ripple-fires-on-touch-rather-than-selected

On my cell phone, `paper-ripple` fires when I touch the element, rather than something is selected.  

I've noticed this is also the same behavior when using the element catalog paper ripple demo on my cell phone. However, this is not the same behavior on the google design site which uses paper ripple but not polymer.

For touch screens- How can I make the paper-ripple behavior like the google design site where the ripple only fires when something is selected rather than touched? 

    <template is="dom-if" if="{{show}}">

      <section class="relative enabled-hover"

        data-name="portfolio"

        on-tap="jumpToPage">

        <div class="vertical layout">

          <div>

            <div>

              <h2 class="section-title">Portfolio</h2>

            </div>

            <br>

            <br>

            <div class="layout horizontal center-center">

              <iron-icon class="big" icon="build"></iron-icon>

              <iron-icon class="big" icon="cloud-circle"></iron-icon>

              <iron-icon class="big" icon="http"></iron-icon>

            </div>

          </div>

        </div>

        <paper-ripple

          fit

          id="ripple"

          initial-opacity="0.95"

          opacity-decay-velocity="0.98"

          hidden$="{{hideRipple}}">

        </paper-ripple>