Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix responsive issue when the chart is recreated #4774

Merged
merged 1 commit into from Oct 7, 2017

Conversation

simonbrunel
Copy link
Member

@simonbrunel simonbrunel commented Sep 18, 2017

Chrome specific issue that happens when destroying a chart and re-creating it immediately (same animation frame?). The CSS animation used to detect when the canvas become visible is not re-evaluated, breaking responsiveness. Accessing the offsetParent property will force a reflow and re-evaluate the CSS animation.

Fixes #4737

Chrome specific issue that happens when destroying a chart and re-creating it immediately (same animation frame?). The CSS animation used to detect when the canvas become visible is not re-evaluated, breaking responsiveness. Accessing the `offsetParent` property will force a reflow and re-evaluate the CSS animation.
@simonbrunel
Copy link
Member Author

simonbrunel commented Sep 18, 2017

Firefox has some issues with the first fix (manually trigger handlers), so simply force a reflow by accessing the offsetParent property of the canvas.

try {
chart = new Chart(canvas.getContext('2d'), config);
} catch (e) {
window.document.body.removeChild(wrapper);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test was leaking because the chart construction throws and the wrapper/canvas wasn't removed.

@simonbrunel
Copy link
Member Author

@daniele-orlando @frlinw can you have a look at this PR and confirm that it fixes your issue?

@madmoizo
Copy link

Hi Simon, sorry I'm in Singapore for 2 weeks with just my phone, I'll check when I'll be back in my cold country

@etimberg
Copy link
Member

etimberg commented Oct 6, 2017

@frlinw have you had a chance to test this?

@simonbrunel simonbrunel merged commit 3fe198c into chartjs:master Oct 7, 2017
@simonbrunel simonbrunel deleted the fix/4737 branch October 7, 2017 15:43
yofreke pushed a commit to yofreke/Chart.js that referenced this pull request Dec 30, 2017
Chrome specific issue that happens when destroying a chart and re-creating it immediately (same animation frame?). The CSS animation used to detect when the canvas become visible is not re-evaluated, breaking responsiveness. Accessing the `offsetParent` property will force a reflow and re-evaluate the CSS animation.
exwm pushed a commit to exwm/Chart.js that referenced this pull request Apr 30, 2021
Chrome specific issue that happens when destroying a chart and re-creating it immediately (same animation frame?). The CSS animation used to detect when the canvas become visible is not re-evaluated, breaking responsiveness. Accessing the `offsetParent` property will force a reflow and re-evaluate the CSS animation.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants