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.

Sign up for GitHub

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

Jump to bottom

offset in rendered img #1298

Closed
jolan78 opened this issue Dec 8, 2017 · 3 comments
Closed

offset in rendered img #1298

jolan78 opened this issue Dec 8, 2017 · 3 comments
Labels
Unverified

Comments

@jolan78
Copy link

jolan78 commented Dec 8, 2017

  • html2canvas version tested with: 63377d4
  • Browser & version: Chrome 62.0.3202.94 and Firefox 57.0
  • Operating system: MacOS 10.11.6

When capturing an image below another one, the rendered image has an offset. the upper part is blank and the lower part is truncated.
this occurs wether foreignObjectRendering is used or not.

in this exemple, the canvas rendered by html2canvas from the second image has a red border to make the bug more obvious:
imgoffset

test case (would not work in jsfiddle due to cross origin issues):
testcase.zip
@jolan78
Copy link
Author

jolan78 commented Dec 13, 2017 •
edited
Loading

the problem occurs because foreignObject is rendered as xhtml strict and do not use doctypes. if the original document's doctype is different (ex: html4 transitional) the images will be spaced differently. here is another testcase demonstrating the issue:
testcase.zip

this commit fixes this bug : 5c6c17d unfortunately I pushed it on top of 4fdf69d which has been submited as a pull request here : #1268 . now the new commit is referenced in the pull request and I'm not sure of the recommended way to handle this.

@jolan78 jolan78 mentioned this issue Dec 14, 2017
Closed
@jolan78
Copy link
Author

jolan78 commented Dec 14, 2017 •
edited
Loading

the issue has two causes :

  • when the foreignObject rendering is used, here :

    html2canvas/src/renderer/ForeignObjectRenderer.js

    Line 79 in 4551976

    img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(

    the generated svg inherits the document doctype while the image with the serialized svg as a dataURL apparently does not.
    as xhtml strict is the only doctype available to foreignObject. the only options here are to either modify vertical-align as in commit 5c6c17d, or to render the svg with another mechanism allowing doctype inheritance.

  • when the computed rendering is used, the iframe is generated with a HTML5 doctype here :

    html2canvas/src/Clone.js

    Line 581 in 4551976

    documentClone.write('<!DOCTYPE html><html></html>');

    copying the element's ownerDocument's documentType to the iFrame's document solves the issue and potentially other issues related to doctype-dependent rendering

commit 5c6c17d solves the issue for both renderers, but only for images. I'm not aware of any other issue related to doctype-dependent rendering but they may exist

@niklasvh
Copy link
Owner

niklasvh commented Jan 2, 2018

Foreign object rendering has a number of issues, so will not be fixing this for it for now.

@niklasvh niklasvh mentioned this issue Jan 2, 2018
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Unverified
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jolan78 @niklasvh