Flickering on resize

[weeco]

Well very easy to describe as it's also happening in your original codepen.io template. I couldn't find anything in your documentation regarding this behaviour, hence I assume it's a bug.

I am using Chrome Version 58.0.3029.81 and when resizing the width of the browser window (until the point when the vertical scrollbar goes away) it will start flickering. I have used this codepen template to verify this behaviour: https://codepen.io/pen?template=JXVYzq

Please see this video, which demonstrates the issue: https://streamable.com/22hi0
Am I missing something?

[etimberg]

That's interesting. I've never noticed that before. I profiled the codepen and there wasn't any long running JavaScript. Does this only reproduce for you in Chrome?

[adsoftware]

Same problem here, but sligthly more embarassing than a quick flickering.
We are working on winform environment using geckofx and this way the flickering sometime never stop and we need to kill app.
Using the default webbrowser (ie) there is no problem.
For the codepen above more flickering than the video with Firefox 53.0

[weeco]

Wow I just saw that the video doesn't even show the continous flickering. It's much more horrible than shown in the video. Maybe you've got a chance to try it yourself in chrome. You just need to resize it until the vertical scrollbar disappears.

Makes this library unuseable for me, sorry.

[etimberg]

This might be a duplicate of #2127

The underlying issue is that Chart.js tries to fill it's parent container. The chart expands large enough that the height causes the scrollbar to appear, which in turn shrinks the area the chart can use, which makes the chart smaller, which means the scrollbar goes away and the issue repeats forever since there isn't a good way to detect this case that works everywhere.

Potential work-arounds:

1. Set your CSS styles up so that the scrollbar doesn't appear
2. Turn of responsive sizing.
3. Have a fixed height container and set maintainAspectRatio: false so that resizing only changes the width.

[reanq]

Webkit browsers like Safari and Chrome subtract the scroll bar width from the visible page width when calculating width: 100% or 100vw. More at DM Rutherford's Scrolling and Page Width.

Try using overflow-y: overlay on parent.

[prashanthc97]

Webkit browsers like Safari and Chrome subtract the scroll bar width from the visible page width when calculating width: 100% or 100vw. More at DM Rutherford's Scrolling and Page Width.

Try using overflow-y: overlay on parent.
This worked. Thanks

[kurkle]

Looks like this has been fixed at some point, or I just can reproduce it with my laptop.

[kurkle]

This was fixed by #6011

[ako-v]

I had the Flickering issue in chrome in various zooms, adding a div as a sibling helped me:

<div class="relative pt-3">
  <div>&nbsp;</div>
  <Chart ....  />
</div>

Credits: #11005 (comment)