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

Text from some nested html elements is not visible when background-color is specified #2739

Open
bangiev opened this issue Oct 28, 2021 · 2 comments · May be fixed by #2951
Open

Text from some nested html elements is not visible when background-color is specified #2739

bangiev opened this issue Oct 28, 2021 · 2 comments · May be fixed by #2951
Labels
Bug

Comments

@bangiev
Copy link

bangiev commented Oct 28, 2021

Bug reports:

Some part of the html text content is not visible when there are several nested html elements and they have background-color styling. Removing the background-color styling is a workaround which leads to the text being rendered as expected, however this makes it impossible to apply a different background-color styling in these cases.

Since the issue is a bit difficult to reproduce, I have put up a jsfiddle example that displays the original html content followed by the generated canvas content below it:
https://jsfiddle.net/bangiev/jw75ym3u/

image

Specifications:

  • html2canvas version tested with: 1.3.2
  • Browser & version: Google Chrome Version 94.0.4606.81 (Official Build) (64-bit)
  • Operating system: Windows 10 Enterprise, 64-bit
@bangiev bangiev mentioned this issue Oct 28, 2021
Open
@niklasvh niklasvh added the Bug label Nov 23, 2021
@MikaelCarpenter
Copy link

Yea running into this same issue. I can share a CodeSandbox that repros the issue, but @bangiev 's jsfiddle repros the issue sufficiently.

It appears to be an issue with "inline" elements actually have a width that is equal to the width of the container. So when trying to paint the canvas it sees a full-width element with a background color and literally paints that on top of the other elements (<strong> in this case). I tried applying z-index to the elements to see if you can control the painting order but it had no effect.

My work around for now is to strip out any background color, but I'm sure someone out there might not be okay with that work around

@martsim6
Copy link

any update on this? Having same problem using jsPDF

ChadJPetersen pushed a commit to ChadJPetersen/html2canvas that referenced this issue Sep 6, 2022
Fix issue niklasvh#2739 allow for multiple bounding boxes in an element.
8d5a45a
@ChadJPetersen ChadJPetersen linked a pull request Sep 6, 2022 that will close this issue
Open
romitkarmakar added a commit to romitkarmakar/html2canvas that referenced this issue Sep 8, 2022
@romitkarmakar
Merge pull request #3 from ChadJPetersen/niklasvh#2739-inline-element…
ac70349 
…-box-sizes

niklasvh#2739 inline element box sizes
@mayankeshmishra mayankeshmishra mentioned this issue Feb 28, 2023
Merged
1 task
mayankeshmishra added a commit to joshtechnologygroup/html2canvas that referenced this issue Feb 28, 2023
@mayankeshmishra
Merge pull request #1 from ChadJPetersen/niklasvh#2739-inline-element…
c0ae658 
…-box-sizes

niklasvh#2739 inline element box sizes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix issue #2739 allow for multiple bounding boxes in an element. ChadJPetersen/html2canvas
4 participants
@niklasvh @bangiev @MikaelCarpenter @martsim6