fix(ripple): calculate relative coordinates from ripple target.

If there are any children the `offsetX` and `offsetY` are wrong, because it's not relative to the ripple target.
We can fix that by calculating `layerX` and `layerY`. As the normal `layerX` and `layerY` is not a W3C Standard (and is deprecated) we need to calculate our coordinates our self.

Fixes #5917

Closes #6092

Author: devversion

src/core/services/ripple/ripple.js

@@ -259,7 +259,17 @@ InkRippleCtrl.prototype.handleMousedown = function (event) {
   if (this.options.center) {
     this.createRipple(this.container.prop('clientWidth') / 2, this.container.prop('clientWidth') / 2);
   } else {
-    this.createRipple(event.offsetX, event.offsetY);
+
+    // We need to calculate the relative coordinates if the target is a sublayer of the ripple element
+    if (event.srcElement !== this.$element[0]) {
+      var layerRect = this.$element[0].getBoundingClientRect();
+      var layerX = event.clientX - layerRect.left;
+      var layerY = event.clientY - layerRect.top;
+
+      this.createRipple(layerX, layerY);
+    } else {
+      this.createRipple(event.offsetX, event.offsetY);
+    }
   }
 };