Charts get distorted sometimes and I dont know why. please hlp

[christopherdurning]

I'm using charts from chart.js with bootstrap carousel. Sometimes the charts go from this pie chart working correctly to pie chart not working correctly. The charts get distorted for some reason, and whenever a chart is distorted and I make the browser window bigger or smaller using the mouse by dragging, the chart goes back to its correct working state which is strange. This only happens sometimes but it is still a problem that needs to be solved. The problems seems to occur more frequently when the browser window isn't fully expanded.

It might be also helpful to know that I have two charts on 5 different carousel pages, and every 5 seconds it moves from one page to the next. Weirdly enough, sometimes only the charts on one slide of the carousel get distorted and the others are fine, but its appears to be random which charts get distorted. Sometimes its charts on one page and other times its charts on many pages.

Check it out here.
http://178.62.63.252/

I just noticed that the charts width = 792 and height = 792 when working correctly and when its distorted that changes to width = -60 and height = -60, why would that happen?

Steps to Reproduce

Its difficult to reproduce but, open this in your browser (http://178.62.63.252/), keep it open for a while and you will see pie charts starting to get distorted, also note that changing the browser window size will make the problem go away. I think the problem is more likely to occur when the browser window isn't fully expanded. As far as I know it occurs in Google chrome and safari, I haven't tried any other browsers.

Here is my code:

<div class="container-fluid">
    <div id="myCarousel" class="carousel slide">

        <div class="navbar navbar-default visible-xs bg-5" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-pillz">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="nav-pillz">
            <ul class="nav nav-pills nav-justified">
                <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">Page A</a></li>
                <li data-target="#myCarousel" data-slide-to="1"><a href="#">Page B</a></li>
                <li data-target="#myCarousel" data-slide-to="2"><a href="#">Page C</a></li>
                <li data-target="#myCarousel" data-slide-to="3"><a href="#">Page D</a></li>
                <li data-target="#myCarousel" data-slide-to="4"><a href="#">Page E</a></li>
            </ul>
        </div>

The first item of the carousel with two pie charts inside(the other items are the same):

<div class="carousel-inner">
<div class="item active">
    <div class="row bg-6">
        <div class="col-sm-1 col-md-1 col-lg-1"></div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            <br>
            <canvas id="pieChartA" ></canvas>
            <br>
        </div>
        <div class="col-sm-2 col-md-2 col-lg-2"></div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            <br>
            <canvas id="pieChartB" ></canvas>
            <br>
        </div>
        <div class="col-sm-1 col-md-1 col-lg-1"></div>
    </div>
</div>

Chart js javascript file:

$(document).ready( function() {

var ctx = document.getElementById("pieChartA");
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: {
        labels: ["Red","Blue","Yellow"],
        datasets: [{
            data: [30, 15, 55],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]},
        options: {
            animation : false
        }
    }); 
});

$(document).ready( function() {
var ctx = document.getElementById("pieChartB");
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: {
        labels: ["Red","Blue","Yellow"],
        datasets: [{
            data: [30, 15, 55],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }]},
        options: {
            animation : false
        }
    }); 
});

Javascript file which controls carousel:

$(document).ready( function() {
    $('#myCarousel').carousel({
        interval: 4000
    });

    $('#playButton').click(function () {
        $('#myCarousel').carousel('cycle');
    });

    $('#pauseButton').click(function () {
        $('#myCarousel').carousel('pause');
    });

    var clickEvent = false;
     $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');        
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
     });
});

[etimberg]

@christopherdurning what version of chrome do you have? I tried with Chrome on a mac and didn't notice this even after keeping your page open for a while. The only thing I can think is that somehow there is a race condition and the size measures before the div is visible and the change is not detected. This would explain why resizing the window (which triggers the resize handlers) fixes this.

@simonbrunel thoughts?

[christopherdurning]

@etimberg Chrome Version 59.0.3071.104 on mac, I just noticed a better way to reproduce the problem. Have a few tabs in the browser window, open a tab with this address http://178.62.63.252/, then switch to a different tab and then switch back and it will be distorted, try this a few times.

[etimberg]

hmmm, maybe something happens with chrome power saving features 🤔

[christopherdurning]

@etimberg , just to pick your brain one last time about this issue. I noticed that this problem does not occur when you open the web page on a mobile device, not sure why that is, perhaps something to do with the screen size. In the html file (the second code snippet down from the top) is there anything wrong with the way I'm setting the column sizes for different screens (these lines col-sm-4 col-md-4 col-lg-4), I dont have a background in JS and html so this is all fairly new to me.

[etimberg]

I think this is a duplicate of #4397 which was fixed in #4406