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 rendering of offscreen elements #1083

Closed

Conversation

7 participants
@eKoopmans
Copy link
Contributor

commented Mar 26, 2017

Bug: Off-screen rendering

Off-screen components are currently not being rendered.

bugfix-offscreen

Fix

When the type: 'view' option is not set, the width of the renderer is set to the right and bottom bounds of the root node, rather than the document width/height.

Related issues/pull requests

#117, #461, #590, #622, #774, #836, #837, #876

@eKoopmans eKoopmans force-pushed the eKoopmans:bugfix/offscreen-rendering branch from 251b3bf to 62b6973 Mar 27, 2017

@Romerski

This comment has been minimized.

Copy link

commented Mar 27, 2017

@eKoopmans Hi. I tryed your fix but im not able to make this work. I have this: http://i.imgur.com/EE8GyHD.png

Green: Popup when I click print button on Gantt chart.
Blue: HTML gantt chart which I want to render.
Red: What is rendering html2canvas from html (only screen visible part of html)

Is a gantt chart rendered by JQuery.gantt, any help to fix this? Thanks!!

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

commented Mar 27, 2017

Sure @Romerski, I'll take a look. Can you give me a link to your page where you're generating the canvas, or a similar demo?

@Romerski

This comment has been minimized.

Copy link

commented Mar 28, 2017

@eKoopmans Sure! I've sent you an email to erik@erik-koopmans.com. Thanks again!

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

commented Apr 1, 2017

@Romerski, I've had a look. The problem is that your element is designed to be exactly the width of its container - so setting overflow: visible on the container doesn't solve the problem because the element isn't any larger than the container. That means that, in my opinion, html2canvas is giving the correct output, because it is rendering the full size of your element.

That said, here's my fix for your specific case:

  1. Before you use html2canvas on your element mod_pf_gantt_244, set the width of its parent (in your case the body of the new window you create) to an arbitrarily large width, something bigger than your element could possibly be:

    var el = document.getElementById('mod_pf_gantt_244');
    el.parentElement.style.width = '10000px';
  2. Then, to prevent your element from filling the entire width we just set, change the element's display style to inline-block (and make sure width is set to auto):

    el.style.display = 'inline-block';
    el.style.width = 'auto';

That should give your element the right width, so that when you convert to canvas it will display correctly.

@Romerski

This comment has been minimized.

Copy link

commented Apr 3, 2017

@Romerski

This comment has been minimized.

Copy link

commented Apr 4, 2017

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

commented Apr 4, 2017

You're welcome @Romerski, glad it works!

@bruce1i

This comment has been minimized.

Copy link

commented May 2, 2017

@eKoopmans thanks, I need the feature and it works for me.

@PieterJanVdb

This comment has been minimized.

Copy link

commented Aug 18, 2017

@eKoopmans Any reason as to why this has not been reviewed / accepted yet?

@Darkmift

This comment has been minimized.

Copy link

commented Sep 1, 2017

Hi,

I am trying to apply a proper print but I am having an issue with the function when called by onclick.

Please see my demonstration:

https://www.youtube.com/watch?v=QrODj-bbv-Y&lc=z23xe15xjvfrgvvvbacdp433tbsjid5ifqxrnt4g5mdw03c010c.1504201255991820

link to project.
https://drive.google.com/drive/folders/0ByKwGLBGU4mPaVUwYVV1QlVQUUE

Any help would be deeply appreciated.

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

commented Sep 3, 2017

@PieterJanVdb the repo owner is doing a big overhaul on html2canvas, I think the new build will have this issue (and many others) resolved. I'm also not sure my solution is perfect...

@Darkmift I've taken a look, and I have to admit I'm confused! I can tell you the different results you're getting are due to your scroll position - so where you say you have to restart the browser, that's not necessary, it's just where you're scrolled to on the screen. But regarding how to fix it... I'm still trying to figure it out!

@idolizesc

This comment has been minimized.

Copy link

commented Nov 8, 2017

Has this been fixed in the latest version?

@niklasvh niklasvh force-pushed the niklasvh:master branch 3 times, most recently from 932773c to 1584357 Dec 3, 2017

@eKoopmans

This comment has been minimized.

Copy link
Contributor Author

commented Dec 6, 2017

@idolizesc good question! In my testing... yes!! It's fixed!

As of v1.0.0-a1, I believe this issue is resolved, in both foreignObjectRendering and regular rendering. Thanks @niklasvh! I'll close this PR - if anyone has any continued problems with offscreen rendering, please post again here.

@eKoopmans eKoopmans closed this Dec 6, 2017

@niklasvh niklasvh moved this from Backlog to v1.0.0 in Backlog Dec 12, 2017

@ywmail ywmail referenced this pull request Jul 5, 2019

Open

v1.0.0-rc.2 breaks PR #1083 #1919

2 of 2 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.