Prevent infinite resize when vertical scrollbar appears #6011

kurkle · 2019-01-23T16:09:53Z

A workaround to the infinte resize problem.

Pens to demonstrate:
master
master - 3 columns

THIS PR:(840d11a)
single
3 rows
3 columns
collapse rows
collapse columns

You get the effect (in master) by resizing window so that scrollbar just appears.

Fixes: #2127

src/core/core.controller.js

etimberg · 2019-01-23T23:49:22Z

src/platforms/platform.dom.js

+			if (container && container.clientWidth !== w && chart.canvas) {
+				// If the container size changed during chart resize, we can assume scrollbar appeared.
+				// So let's resize again, with the scrollbar visible
+				ret = listener(createEvent('resize', chart));


I'm curious how the 2nd resize doesn't cause the scrollbar to go away

What I think happens: We are doing the resize in a onScroll event. We resize, notice it made scrollbars visible and resize again. Scrollbars are hidden in the end of this scroll event. ~~And I suppose browsers won't fire another scroll until the previous is done.~~
And throttled() prevents multiple onScroll's in same frame.

Initially I was storing the width, but accidentally found out, it was not really needed.

Ahh, that's a good find. If throttled() can prevent the double event then I'm ok with testing this out further

simonbrunel

I'm still getting a jumpy behavior (not infinite) just before the scrollbar become visible or hidden. I think it's better than master but still unexpected and will certainly be reported as a bug.

Anyway, I'm a bit worried about this PR because we are considering that a container width change during resize is due to scrollbar visibility change. But what about animations (via JS or CSS) or similar? can you setup a pen that resize the container with a CSS animation (expand / collapse for example)?

Also, can we test this behavior with multiple charts on the same page (same row or not)?

src/platforms/platform.dom.js

kurkle · 2019-01-25T11:46:53Z

I'm still getting a jumpy behavior (not infinite) just before the scrollbar become visible or hidden. I think it's better than master but still unexpected and will certainly be reported as a bug.

This is due to the 2nd resize that's done while scrollbar is visible (and thus reducing width).
The width is a bit smaller (scrollbar width -1 or so) than just before, so it jumps a little.
I thought about adding the math to compensate that part, but I think its not worth the effort and prone to buggy situations.

Anyway, I'm a bit worry about this PR because we are considering that a container width change during resize is due to scrollbar visibility change. But what about animations (via JS or CSS) or similar? can you setup a pen that resize the container with a CSS animation (expand / collapse for example)?

Good points, I'll do some more pens.

Also, can we test this behavior with multiple charts on the same page (same row or not)?

I've tested it with multiple charts on different lines and they end up being different sizes some times. Still better than infinite resize IMO. I'll add pens for this too.

simonbrunel · 2019-01-25T12:48:03Z

I thought about adding the math to compensate that part, but I think its not worth the effort and prone to buggy situations.

Agreed, and again, we can't assume that the container width has changed because the scrollbar visibility change. Also, we would need to handle cases where the scrollbars are not in the body but on any parent container.

I've tested it with multiple charts on different lines and they end up being different sizes some times. Still better than infinite resize IMO.

"Better" if that happens only instead of the infinite resize. What I'm worried about is that it could happen in other scenarios than scrollbars.

simonbrunel · 2019-01-25T16:46:18Z

Thanks @kurkle for the pens, I can barely test the columns ones because my screen is not high enough (laptop) :). 3 columns jumps a lot vertically when resizing, I'm wondering if it's the same issue with master? Else size animations don't seem to be impacted by this workaround.

kurkle · 2019-01-25T17:17:25Z

@simonbrunel change the aspectRatio to suit your screen better :)

simonbrunel · 2019-01-25T17:22:46Z

Yeah, that's what I did but can't test the pen in "Full page view", but it was enough to see the "obvious issue here". Having the full Chart.js code in the pen makes the pen really painful to manipulate, I'm wondering if there is not another way to easily integrate WIP builds.

simonbrunel · 2019-01-25T20:04:45Z

I think the 3 columns jumping behavior is due to the display: inline-block which aligns content on bottom, so it should be the same issue with master.

I noticed that when resizing down the window, the vertical scrollbar breaks as soon as the workaround applies. I guess this is better than the current behavior, I just hope that we are not going to break use cases that depend on the container resizing.

src/platforms/platform.dom.js

kurkle · 2019-01-26T09:32:25Z

Limited the 2nd resize to when container size shrinks in the first one. This removes some jumpiness (and is logical).

Updated the comment to contain all relevant information (I'm not native in English, so happy to reword).

All pens updated and also added a master - 3 columns.
In the ones with columns, I added vertical-align: top; to css.

If the container size shrank during chart resize, let's assume scrollbar appeared. So we resize again with the scrollbar visible effectively making chart smaller and the scrollbar hidden again. Because we are inside `throttled`, and currently `ticking`, scroll events are ignored during this whole 2 resize process. If we assumed wrong and something else happened, we are resizing twice in a frame (potential performance issue)

#7104) * Use Resize/MutationObserver to detect detach/attach/resize * Cleanup * Review update * Restore infinite resize detection (#6011)

If the container size shrank during chart resize, let's assume scrollbar appeared. So we resize again with the scrollbar visible effectively making chart smaller and the scrollbar hidden again. Because we are inside `throttled`, and currently `ticking`, scroll events are ignored during this whole 2 resize process. If we assumed wrong and something else happened, we are resizing twice in a frame (potential performance issue)

ashley-mort · 2024-02-29T17:52:43Z

I still get the infinite scroll event just before my Y axis scrollbar appears. Any additional tips on how to avoid this since this fix was made? I'm on Chart.js 2.9.4.

UPDATE: I got around my issue by setting maintainAspectRatio:false; on all my charts and then setting aspect-ratio:2; in the css of my charts' parent containers.

kurkle added 2 commits January 23, 2019 18:04

simple workaround for infinite resize

03487a5

refactor to be simpler

5dd59ec

kurkle commented Jan 23, 2019

View reviewed changes

src/core/core.controller.js Show resolved Hide resolved

even simpler

6f47443

etimberg reviewed Jan 23, 2019

View reviewed changes

etimberg previously approved these changes Jan 24, 2019

View reviewed changes

etimberg requested a review from simonbrunel January 24, 2019 12:17

benmccann previously approved these changes Jan 25, 2019

View reviewed changes

simonbrunel previously requested changes Jan 25, 2019

View reviewed changes

src/platforms/platform.dom.js Outdated Show resolved Hide resolved

src/platforms/platform.dom.js Outdated Show resolved Hide resolved

src/platforms/platform.dom.js Outdated Show resolved Hide resolved

src/platforms/platform.dom.js Outdated Show resolved Hide resolved

requested changes

fe90e53

kurkle dismissed stale reviews from benmccann and etimberg via fe90e53 January 25, 2019 13:54

simonbrunel added the type: bug label Jan 25, 2019

simonbrunel changed the title ~~simple workaround for infinite resize~~ Prevent infinite resize when vertical scrollbar appears Jan 25, 2019

simonbrunel reviewed Jan 25, 2019

View reviewed changes

src/platforms/platform.dom.js Outdated Show resolved Hide resolved

limit to when container size shrinks, verbose comment

840d11a

simonbrunel approved these changes Jan 29, 2019

View reviewed changes

etimberg approved these changes Jan 29, 2019

View reviewed changes

simonbrunel merged commit e6d5896 into chartjs:master Jan 30, 2019

simonbrunel added this to the Version 2.8 milestone Feb 1, 2019

kurkle deleted the infinite-scoll branch May 5, 2019 06:48

ghost mentioned this pull request May 30, 2019

[Chartjs-v2.0] Infinite .resize() when scrollbar appears #2127

Closed

snyk-bot mentioned this pull request Nov 9, 2019

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.1 socialsoftware/quizzes-tutor#45

Merged

kurkle added a commit to kurkle/Chart.js that referenced this pull request Feb 17, 2020

Restore infinite resize detection (chartjs#6011)

da9d329

kurkle added a commit to kurkle/Chart.js that referenced this pull request Feb 17, 2020

Restore infinite resize detection (chartjs#6011)

203afdc

kurkle mentioned this pull request Feb 17, 2020

Flickering on resize #4179

Closed

etimberg pushed a commit that referenced this pull request Feb 17, 2020

Use ResizeObserver and MutationObserver to detect detach/attach/resize (

bfe3421

#7104) * Use Resize/MutationObserver to detect detach/attach/resize * Cleanup * Review update * Restore infinite resize detection (#6011)

This was referenced Mar 4, 2020

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 ajesse11x/gravity#5

Open

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 qsays/ceph#4

Open

vpetersson mentioned this pull request Mar 7, 2020

[Snyk] Upgrade chart.js from 2.7.3 to 2.9.3 WoTTsecurity/api#764

Merged

This was referenced Mar 9, 2020

[Snyk] Upgrade chart.js from 2.7.1 to 2.9.3 savinovvu/reg-exp#5

Closed

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 MichaelKohler/reps-voting-analysis#14

Merged

snyk-bot mentioned this pull request Apr 1, 2020

[Snyk] Upgrade chart.js from 2.7.2 to 2.9.3 baophucct/wallet#4

Open

This was referenced Apr 14, 2020

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 mc-ireiser/startbootstrap-sb-admin-2#2

Open

[Snyk] Upgrade chart.js from 2.8.0 to 2.9.3 mc-ireiser/coreui-free-vue-admin-template#5

Open

mlorant mentioned this pull request Jul 8, 2020

Tooltips not showing up when the viewport is at a specific size #7594

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Prevent infinite resize when vertical scrollbar appears #6011

Prevent infinite resize when vertical scrollbar appears #6011

kurkle commented Jan 23, 2019 •

edited

Loading

etimberg Jan 23, 2019

kurkle Jan 24, 2019 •

edited

Loading

etimberg Jan 24, 2019

simonbrunel left a comment •

edited

Loading

kurkle commented Jan 25, 2019

simonbrunel commented Jan 25, 2019 •

edited

Loading

simonbrunel commented Jan 25, 2019 •

edited

Loading

kurkle commented Jan 25, 2019

simonbrunel commented Jan 25, 2019

simonbrunel commented Jan 25, 2019 •

edited

Loading

kurkle commented Jan 26, 2019

ashley-mort commented Feb 29, 2024 •

edited

Loading

Prevent infinite resize when vertical scrollbar appears #6011

Prevent infinite resize when vertical scrollbar appears #6011

Conversation

kurkle commented Jan 23, 2019 • edited Loading

etimberg Jan 23, 2019

Choose a reason for hiding this comment

kurkle Jan 24, 2019 • edited Loading

Choose a reason for hiding this comment

etimberg Jan 24, 2019

Choose a reason for hiding this comment

simonbrunel left a comment • edited Loading

Choose a reason for hiding this comment

kurkle commented Jan 25, 2019

simonbrunel commented Jan 25, 2019 • edited Loading

simonbrunel commented Jan 25, 2019 • edited Loading

kurkle commented Jan 25, 2019

simonbrunel commented Jan 25, 2019

simonbrunel commented Jan 25, 2019 • edited Loading

kurkle commented Jan 26, 2019

ashley-mort commented Feb 29, 2024 • edited Loading

kurkle commented Jan 23, 2019 •

edited

Loading

kurkle Jan 24, 2019 •

edited

Loading

simonbrunel left a comment •

edited

Loading

simonbrunel commented Jan 25, 2019 •

edited

Loading

simonbrunel commented Jan 25, 2019 •

edited

Loading

simonbrunel commented Jan 25, 2019 •

edited

Loading

ashley-mort commented Feb 29, 2024 •

edited

Loading