Wenn die Höhe des Rect mit CSS-Übergang geändert wird, wird das niedrigste Rect manchmal verschmiert

Question

Ich verwende eckig, um dynamische Diagramme zu erstellen. Ich benutze css 'transition', um zu bewirken, dass die Charts steigen. Aber wenn ich die Charts mit einem Wert initialisiere, sind die Charts zwar sehr schön, aber aus irgendeinem Grund wird das Chart mit dem niedrigsten Wert manchmal verschmiert. Ich habe bemerkt, dass das nicht bei jedem Computer passiert. Irgendwelche Ideen warum? Vielleicht hat es etwas mit der Grafikkarte zu tun? oder der Browser?

Beispiel: http://jsfiddle.net/Lvc0u55v/8846/ re-run es ein paar Mal das Problem zu sehen, tritt

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) 
} 

Answer 1

Sie können dieses Problem beheben, indem outline: 1px solid transparent; zu Ihrem rect CSS hinzufügen.

Demo

Here's the reason why this works

Answer 2

Verwenden Sie die 2D statt 3D-Übergang:

svg { 
    transform: rotate(180deg); 
} 

Updated Fiddle.