Abort paper ripple when scrolling on touch devices

[MajorBreakfast]

Scrolling on touch devices triggers the ripple effect which is really distracting. It'd be great if the ripple could start as normal but aborts if a scroll is detected. Maybe using requestAnimationFrame and element.getBoundingClientRect() to detect if the element was moved?

[keanulee]

@MajorBreakfast Calling getBoundingClientRect() on every frame seems expensive. A better way would be to install a scroll listener and then cancelling the ripple in there:

document.addEventListener('scroll', function() {
  this.getRipple().uiUpAction();
});

Of course, this gets complicated if the element is inside an element scroller (i.e. not the document scroller), so this behavior is probably more suitable at the user-level.

[MajorBreakfast]

@keanulee Using getBoundingClientRect() was just a quick idea. There might be a better solution.

About document vs element scroller: I've never built a web app that is a document scroller. That's too constrained for me. I'm always scrolling inside elements. I'm using Polymer mostly because it lets me build great looking apps. I don't want my app to be recognized as a web app too easily. Scroll indicators on top of the toolbar would be a giveaway. So, never document scroller :)

About the performance cost of getBoundingClientRect(). This solution requires the loop to run only on pressed buttons. That's (unless you nest buttons) just a single button at a time. I can't come up with a more reliable solution to detect scrolls.

I think what's really needed here is different events like press-start, press-cancel and press-end in the iron behavior. Where press-end is fired after successful presses and press-cancel if the press turned out to be a scroll. Then, it's easy to modify the ripple behavior.

I've added a quick-fix in my app:

listeners: {
  'touchmove': '_onTouchMove'
},
_onTouchMove: function (event) {
  var rippleEl = this.getRipple()
  rippleEl.ripples.map(function (r) { rippleEl.removeRipple(r) })
}

That's not a good general solution though, because it detects false positives. I'm not using uiUpAction() action because it's not instant.

[MajorBreakfast]

I've played around some more and I come to the conclusion that it'd be best if the ripple only appeared once a tap is detected. That's the way it is done in android, e.g. the settings app. So, buttons should behave differently depending on whether they're inside a scrollable area or not:

• Inside scrollable area (e.g. a list item): Play ripple on tap event
• Outside scrollable area (e.g. a toolbar button): Play ripple on mouse down (sooner)

Maybe an attribute to switch between the behaviors could be introduced: ripple-on="mousdown", ripple-on="tap"

[imolorhe]

@keanulee @MajorBreakfast what is the best approach for this now? I currently have the same issue.

[MajorBreakfast]

@imolorhe I placed a <paper-ripple> inside a <div> with pointer-events: none and trigger the ripples manually when appropriate.

...
<dom-module id="my-element">
  <template>
    <style>
      :host { position: relative; }
      #rippleContainer { pointer-events: none; }
    </style>

    ...

    <div id="rippleContainer">
      <paper-ripple id="ripple"></paper-ripple>
    </div>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      listeners: {
        'tap': '_onTap'
      },

      _onTap: function (event) {
        this.$.ripple.uiDownAction(event)
        this.$.ripple.uiUpAction(event)
        ...
      }
    })
  </script>
</dom-module>

Just a workaround, though.

(It's been a while. Come the think about it, the wrapping <div> might not be needed. Setting pointer-events: none on the ripple probably works also. You can test that if you want.)

[imolorhe]

@MajorBreakfast Thanks! This helped a lot! I had to reuse it for my purpose though, since mine was a list component with several ripples in it.

[MajorBreakfast]

@imolorhe Glad I could help :)