When changing height of rect with transition, lowest rect sometimes get smeared - html

Question

I'm using angular to create dynamic charts. I use css 'transition' in order to give it an effect, that the charts are going up. But when I initialize the charts value, the charts are indeed go up very nicely, but for some reason the chart with the lowest value sometimes gets smeared.
Any ideas why?
I attched a photo to show the unwanted outcome.
Left Chart Gets Smeared http://jsfiddle.net/Lvc0u55v/8846/
Update:
Here is a little example of how it suppose to look. Run it a few times to see it happens. You know what is crazy? I ran it a few times on different computers on Chrome with same version and I saw the error happens only on one of them. Does it might have something to do with the graphic card?
http://jsfiddle.net/Lvc0u55v/8846/
Angular:
var app = angular.module("myApp", [])
app.controller("MyCtrl", function ($scope, $timeout) {
$scope.charts = [{height:0, x:10, width:80, color:"red"},
{height:0, x:110, width:80, color:"blue" },
{height:0, x:210, width:80, color:"purple"},
{height:0, x:310, width:80, color:"green"}]
$timeout(function(){
for(var i = 0;i<4;i++){
$scope.charts[i].height = 200 + Math.random() * 100;
}
}, 1)
})
Html:
<div ng-app="myApp" ng-controller="MyCtrl">
<svg width=400 height=300>
<rect ng-repeat="chart in charts" ng-attr-height="{{chart.height}}" ng-attr-width={{chart.width}} ng-attr-x="{{chart.x}}" fill={{chart.color}} stroke=black stroke-width:1px></rect>
</svg>
</div>
CSS:
rect{
transition: 0.5s;
}
svg{
transform:rotateX(180deg)
}