Qfyilyi

<div class="row">

    <div class="col-md-6 graph-column">

        <div *ngIf="graphsLoaded">

            <span class="graph-title">Players this month</span>

            <mat-divider class="graph-divider"></mat-divider>            

        </div>

        <div class="graph-content">

            <canvas id="canvas-players">{{ players }}</canvas>

        </div>

    </div>

    <div class="col-md-6 graph-column">

            <div *ngIf="graphsLoaded">

                <span class="graph-title">Server Uptime</span>

                <mat-divider class="graph-divider"></mat-divider>            

            </div>

            <div class="graph-content">

                <canvas id="canvas-status">{{ status }}</canvas>

            </div>

    </div>

</div>

Graph loads fine, but what happens when you want to add a fade-in effect when the graph loads?

You do the following:

#canvas-players {

    animation: anim 1s;

}



@keyframes anim {

    0% {

        opacity: 0.1;

    }

    100% {

        opacity: 1;

    }

}

Now when you load the page, one of your graphs should load with fade-in effect. OK it does!

But now when you resize your screen this is what happens:

As you see, the first graph keeps it's original size, which is wrong, and the other graph is correct, resizing..

I tried to discover whats wrong, and it seems like it does not change the width and height attributes after using animation.

One interesting thing is, if I turn off the animation from inspect, and turn it back on, it will work just fine!

If I set width: 100% !important; and height: auto; to canvas, it will resize, but the whole canvas will be pixel'ed, according to the size.

I am wondering, if its a chartJs bug or a CSS bug?