md-list-item ripple + Iphone/android user agent

[0101adm]

http://codepen.io/0101adm/full/LpOwBq/

in chrome's device mode emulating iphone 5s, open dialog.

dragging up/down (to scroll) causes the ripple to permanently shade the md-list-item.

[mckenzielong]

On Android (chrome 43) this seems to happen with every thing that can ripple.

This issue coupled with the fact that the ripple service was using mousedown (which causes issues for blackberry 10's browser) caused me to come up with a not so pretty work around until this all gets officially sorted out.

InkRippleCtrl add a delay variable, inject $mdGesture and register press events

function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdUtil, $mdGesture) {
  this.$window    = $window;
  this.$timeout   = $timeout;
  this.$mdUtil    = $mdUtil;
  this.$scope     = $scope;
  this.$element   = $element;
  this.options    = rippleOptions;
  this.mousedown  = false;
  this.ripples    = [];
  this.timeout    = null; // Stores a reference to the most-recent ripple timeout
  this.lastRipple = null;
  this.rippleDelay = 100;

  $mdUtil.valueOnUse(this, 'container', this.createContainer);
  $mdUtil.valueOnUse(this, 'background', this.getColor, 0.5);

  this.color = this.getColor(1);
  this.$element.addClass('md-ink-ripple');

  // attach method for unit tests
  ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);
  ($element.controller('mdInkRipple') || {}).setColor = angular.bind(this, this.setColor);

  $mdGesture.register($element, 'press');
  this.bindEvents();
}

Bind events we bind mousedown to $md.pressdown. This solves the mousedown issue for blackberry, but breaks the ripple size since we no longer have layerX and layerY (apparently they are non-standard?)

InkRippleCtrl.prototype.bindEvents = function () {
  this.$element.on('$md.pressdown', angular.bind(this, this.handleMousedown));
  this.$element.on('$md.pressup touchmove', angular.bind(this, this.handleMouseup));
};

This seems gross, but I changed handlemousedown to have a short delay before firing the ripple. This way we don't light up every single list item with a ripple.

InkRippleCtrl.prototype.handleMousedown = function (event) {
  if (this.mousedown ) return;

  this.setColor(window.getComputedStyle(this.$element[0])['color']);

  // When jQuery is loaded, we have to get the original event
  if (event.hasOwnProperty('originalEvent')) event = event.originalEvent;
  this.mousedown = true;
  this.$timeout(angular.bind(this, function () {
      if (this.mousedown) {
        if (this.options.center) {
          this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);
        } else {
          this.createRipple(event.pointer.x, event.pointer.y);
        }
      }
    }
  ), this.rippleDelay);
};

Last fix the create ripple calculation. I assume a good chunk of why mousedown and layerX/Y were used was to avoid the call to getBoundingClientRect?

InkRippleCtrl.prototype.createRipple = function (left, top) {
  if (!this.isRippleAllowed()) return;

  var ctrl        = this;
  var ripple      = angular.element('<div class="md-ripple"></div>');
  var rect        = this.$element[0].getBoundingClientRect();
  var width       = rect.width;
  var height      = rect.height;
  var x           = Math.abs(width) * 2;
  var y           = Math.abs(height) * 2;
  var size        = getSize(this.options.fitRipple, x, y);

  ripple.css({
    left:            left - rect.left + 'px',
    top:             top - rect.top + 'px',
    background:      'black',
    width:           size + 'px',
    height:          size + 'px',
    backgroundColor: rgbaToRGB(this.color),
    borderColor:     rgbaToRGB(this.color)
  });
...

[gpopovic]

I'm having the same issue on iphone chrome

[PostImpatica]

if you downgrade to 0.11.4 this does not exist, but then i get an issue where md-select items auto close on the iPhone so i can't use 0.11.4. I ended up adding md-no-ink to the elements in the meantime.

[shusain]

+1 same issue, touch down registers and shows the ripple but if I'm scrolling the menu then the up event doesn't happen on the button itself and the ripple darkening doesn't clear. This can be seen in the menu on the angular-material demo/docs site as well.

[lukabers]

+1 same issue

[jpike88]

This is a serious flaw, any app made using buttons is going to look like crap and confuse the hell out users.