cssトランジションでrectの高さを変更すると、最小のrectが時々塗りつぶされることがあります

Question

私は、動的チャートを作成するためにangleを使用しています。私はそれを効果を与えるために、チャートが上がっていることをcss 'transition'を使用します。しかし、私が値を使ってチャートを初期化すると、実際には非常にうまく上がっていますが、何らかの理由で最も低い値のチャートが塗りつぶされることがあります。私はそれがすべてのコンピュータで起こらないことに気づいた。なぜどんなアイデア？多分それはグラフィックカードと関係がありますか？またはブラウザ？

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

Answer 1

を発生するあなたのrect CSSにoutline: 1px solid transparent;を追加することによってこの問題を解決することができます。

Here's the reason why this works

Answer 2

Demo

使用代わりに3D遷移の2D：

svg { 
    transform: rotate(180deg); 
} 

Updated Fiddle。