Charts.JS Not Rendering Properly on Mobile Device?

Have you tried the iOS simulator in Xcode to check for rendering issues? Also, check on Chrome for iOS because the latest Safari for iOS is the new IE8.

I was able to replicate the issue by using Safari on OSX.

This appears to be a known bug, with some rather "hacky" workarounds: https://github.com/jtblin/angular-chart.js/issues/29

I am currently implementing a CSS animation workaround to trigger a "re-render", but this is certainly not ideal.

What if you used JS to resize the window by say 1% less? Maybe triggering a window resize will fix the graph. Like I said, Safari is the new IE8.

Yeah. JS resize options are also viable. The following CSS seemed to do the trick for now, though:

    @keyframes chartfix {
        
        0% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        50% {
            transform: scale(1.01);
            -webkit-transform: scale(1.01);
        }
        100% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }

    .panel {
        animation-delay: 3s;
        -webkit-animation-delay: 3s;
        animation: chartfix 5s;
        -webkit-animation: chartfix 5s;
    }

I encapsulated it into the Vue component itself, and it is barely noticeable on the visual side of things.

It is very unfortunate that Safari is so troublesome. Especially when you consider that any web browser running on IOS is, essentially, running Safari "under the hood".

I know many have given up and went with different chart frameworks, but I can't fault Charts.JS for something that is the fault of Apple. Besides, if the framework is good enough for Jeffrey, it is good enough for me.