Wrong ink ripple position on md-list-item - css

Question

On the first page, the ink ripple is correctly placed when we click on an image (It starts from the cursor). On the next pages (1 or above), the ink ripple is always starting on the left side of the image no madder where we click on the image.
Important : Only appears on Chrome & Opera ! (Firefox works fine)
Any Idea how I might fix this or is it a bug ?
JSFiddle with SASS
angular.module("myApp", ["ngMaterial"])
.controller("myCtrl", function($scope) {
var NB_ACTORS_PER_PAGE = Math.floor(document.getElementById("actorsFlexList").offsetHeight / 60);
$scope.pageIndex = 0;
$scope.actors = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
$scope.select = function() {
};
$scope.previousPage = function() {
if ($scope.pageIndex > 0) {
--$scope.pageIndex;
document.getElementById("actorsFlexList").style.transform = "translate(" + (-$scope.pageIndex * 60) + "px, 0)";
}
}
$scope.nextPage = function() {
if ($scope.pageIndex < ($scope.actors.length / NB_ACTORS_PER_PAGE) - 1) {
++$scope.pageIndex;
document.getElementById("actorsFlexList").style.transform = "translate(" + (-$scope.pageIndex * 60) + "px, 0)";
}
}
});
#advancedNavbar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 60px;
background-color: #eeeeee;
overflow: hidden;
}
#advancedNavbar #specificTemplate {
position: absolute;
top: 36px;
bottom: 0;
left: 0;
right: 0;
}
#advancedNavbar #specificTemplate #actorsList {
height: 100%;
}
#advancedNavbar #specificTemplate #actorsList md-list {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30px;
padding: 0;
display: flex;
display: -ms-flexbox;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
align-content: flex-start;
-moz-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
-o-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
-webkit-transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item {
min-height: 0;
height: 60px;
width: 60px;
margin-bottom: 2px;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button {
padding: 0;
border-radius: 0;
min-width: 0;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-list-item-inner {
min-height: 0;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-list-item-inner img {
height: 60px;
}
#advancedNavbar #specificTemplate #actorsList md-list md-list-item button .md-ripple-container {
border-radius: 0;
}
#advancedNavbar #specificTemplate #pagination {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size: 20px;
height: 30px;
}
#advancedNavbar #specificTemplate #pagination .pagination-button {
color: gray;
float: left;
cursor: pointer;
width: 50%;
height: 100%;
text-align: center;
line-height: 30px;
}
#advancedNavbar #specificTemplate #pagination .pagination-button:hover {
color: black;
}
#advancedNavbar #specificTemplate #pagination .pagination-button:focus {
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0-rc2/angular-material.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="advancedNavbar">
<div style="text-align:center;">{{pageIndex}}</div>
<div id="specificTemplate">
<div id="actorsList">
<md-list id="actorsFlexList">
<md-list-item ng-repeat="actor in actors" ng-click="select()" aria-label="actor">
<img ng-src="http://cdn.wccftech.com/wp-content/uploads/2015/04/mario-2.png" />
</md-list-item>
</md-list>
<div id="pagination">
<div id="leftCaret" class="pagination-button fa fa-caret-left" ng-click="previousPage()"></div>
<div id="rightCaret" class="pagination-button fa fa-caret-right" ng-click="nextPage()"></div>
</div>
</div>
</div>
</div>
</div>