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

Problem with foreignObjectRendering set to 'true' #2228

Open
IAmRC1 opened this issue May 11, 2020 · 9 comments
Open

Problem with foreignObjectRendering set to 'true' #2228

IAmRC1 opened this issue May 11, 2020 · 9 comments

Comments

@IAmRC1
Copy link

IAmRC1 commented May 11, 2020

  • html2canvas version tested with: latest
  • Browser & version: Chrome latest
  • Operating system: Ubuntu 16.04

So i have a admin page with a lot of charts, Now when i take screenshot with foreignobject set to false, which is default value, it gives me the icons n images but the most of the charts aren't visible, when i set it to true, the charts are visible but now the sidebar image and icons are rendered as square boxes. Also, there I have set overflow:hidden but the scrollbar is still visible.
Attaching both screenshots with value true and false
foreignObjectRendering: true
Screenshot Mon, May 11, 2020 3_29 PM
foreignObjectRendering: false
Screenshot Mon, May 11, 2020 3_30 PM

ANY HELP APPRECIATED

@IAmRC1 IAmRC1 closed this as completed May 11, 2020
@IAmRC1 IAmRC1 reopened this May 12, 2020
@ChristianBeilschmidt
Copy link

Also, the font in the navigation is different. As far as I can see, you can't have both currently.

There are also some pull requests regarding these problems but there is not much progress currently.

@IAmRC1
Copy link
Author

IAmRC1 commented May 12, 2020

Well, i am moving forward with foreignobjectrendering set to false, and i am trying to fix the problem of rendering svg in html2canvas. Right now have a little success but its weird why one svg is rendering but the other one is not. Have a look
Screenshot1
Below is the screenshot
Screenshot Tue, May 12, 2020 6_29 PM

@ChristianBeilschmidt
Copy link

Maybe the left one is drawn inline and the right one is included as an outside object. There are three PRs open that might be connected - or might not:
#2151
#998
#2020

@IAmRC1
Copy link
Author

IAmRC1 commented May 13, 2020

Well both are included as outside libraries, though different one, left is of react-apex-charts and right one is react-circular-progressbar. Though yesterday i found why the right one is not rendering, the reason being its not having a width and height attribute on svg, once I pass it in inspector, it does get rendered.

@ChristianBeilschmidt
Copy link

ChristianBeilschmidt commented May 13, 2020

And what did you change to make the library render these svgs? (apart from setting the width and height)

@IAmRC1
Copy link
Author

IAmRC1 commented May 13, 2020

Setting foreignobjectrendering to true and setting width n height on svg will render it

@sinpor
Copy link

sinpor commented Jun 17, 2020

When I set foreignObjectRendering: true then background-image is not display. what should I configure

@woota
Copy link

woota commented Jun 25, 2021

Same problem...When I set foreignObjectRendering: true then background-image is not display. what should I configure

1 similar comment
@arduR-O
Copy link

arduR-O commented Jun 18, 2024

Same problem...When I set foreignObjectRendering: true then background-image is not display. what should I configure

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants