2

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 with a value, the charts are indeed go up very nicely, but for some reason the chart with the lowest value sometimes gets smeared. I noticed that it doesn't happen with every computer. Any ideas why? Maybe it has something to do with the graphic card? or the browser?

Example: http://jsfiddle.net/Lvc0u55v/8846/ re-run it a few times to see the problem occurs

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)
}
Joe
  • 443
  • 1
  • 4
  • 21
  • Turn off hardware acceleration and I guess it will be gone. This is a browser dependant and hardware dependant problem, and as far as I know there is no real fix for it – Poul Kruijt Aug 30 '16 at 08:32
  • @PierreDuc you are right. I turn it off and it worked! But apperantely there is a 'fix' to it. See the above answer. – Joe Aug 30 '16 at 09:10

2 Answers2

3

Use the 2D instead of 3D transition:

svg {
    transform: rotate(180deg);
}

Updated Fiddle.

skobaljic
  • 9,379
  • 1
  • 25
  • 51
  • If you look closely the 2D implementation is a bit laggy / less smooth (at least on my machine - Chrome / expensive hardware). Likely because of the missing hardware acceleration. – Mx. Aug 30 '16 at 09:15
  • It works, but now some charts are not rising from the same starting point. and it is laggy as @Mx. pointed out. – Joe Aug 30 '16 at 09:19
  • Try adding `will-change: transform;`... anyhow the animation is not visible on Firefox, you have to spend more time adjusting it. – skobaljic Aug 30 '16 at 09:23
  • @skobaljic This will be my next objective :D – Joe Aug 30 '16 at 09:34
  • @Joe good luck with that one - since firefox doesn't allow css styling the rect's width, the transition is not working (transitions only work for css). Maybe you are better of with an oldschool `setTimeout` animation, or using plain html instead of an svg. – Mx. Aug 30 '16 at 09:41
2

You can fix this by adding outline: 1px solid transparent; to your rect css.

Demo

Here's the reason why this works

Community
  • 1
  • 1
Mx.
  • 3,588
  • 2
  • 25
  • 33
  • Very nice and very interesting. I saw that in the original answer the person who answered mentioned 'anti-aliasing issue'. Frankly, I couldn't understand it. – Joe Aug 30 '16 at 09:25