Javascript 当使用css转换更改rect的高度时，最低的rect有时会被弄脏

我正在使用angular创建动态图表。我使用css“transition”是为了给它一个效果，即图表正在上升。但是当我用一个值初始化图表时，图表确实上升得很好，但是由于某些原因，值最低的图表有时会被弄脏。我注意到并不是每台电脑都会这样。你知道为什么吗？也许这和图形卡有关？还是浏览器

示例： 重新运行几次以查看问题的发生

角度：
var-app=angular.module（“myApp”，[]）；
app.controller（“MyCtrl”，函数（$scope，$timeout）{
$scope.charts=[{高度：0，x:10，宽度：80，颜色：“红色”}，
{高度：0，x:110，宽度：80，颜色：“蓝色”}，
{高度：0，x:210，宽度：80，颜色：“紫色”}，
{高度：0，x:310，宽度：80，颜色：“绿色”}]；
$timeout（函数（）{
对于（var i=0；i您可以通过在
rect
css中添加
outline:1px solid transparent；
来修复此问题


使用2D而不是3D过渡：

svg {
    transform: rotate(180deg);
}

.
关闭硬件加速，我想它会消失。这是一个依赖于浏览器和硬件的问题，据我所知，没有真正的解决方法it@PierreDuc你是对的。我关闭了它，它就工作了！但显然有一个“修复”它。请看上面的答案。如果你仔细看，2D实现有点滞后/不太平滑（至少在我的机器上-镀铬/昂贵的硬件）。可能是因为缺少硬件加速。它可以工作，但现在一些图表没有从同一个起点上升。它与@Mx一样滞后。指出。尝试添加
将改变：transform；
…无论如何，动画在Firefox上不可见，你必须花更多时间调整它。@skobaljic这将是我的下一个目标：D@Joe祝你好运——因为firefox不允许css设置矩形宽度的样式，所以转换不起作用（转换只适用于css）。也许你更适合使用老式的
setTimeout
动画，或者使用纯html而不是svg。非常好，非常有趣。我在原始答案中看到，回答者提到了“抗锯齿问题”。坦白说，我不理解。
svg {
    transform: rotate(180deg);
}