Html2canvas: Text missing on rendering with inline-block or inline css property

[clementAC]

Bug reports:

Hi,
I have problems with some elements I try to screenshot. I made a sandbox exemple of my problem

As you can see clicking on the screenshot button, the text parts are not rendered or maybe hidden by the background. I already tried foreignObjectRendering without success.
I used html2canvas by the past and I never had this problem.

Specifications:

• html2canvas version tested with: alpha 12
• Browser & version: chrome 65.0.3325.181
• Operating system: windows 10

[clementAC]

After some test,

It seems the property inline-block or inline brake somehow html2canvas. When using one of these two properties, the text is invisible but the text area is kept for the rendering

[camarrone]

Hello,

I am having the same issue here using cssdisplay:block

Did you solved it?

Thanks!

[clementAC]

Hi,
I solved it playing with display properties but I don't remember exactly how. Some combinations make the librarie not working as expected =/

[JEEVANJGA]

facing the same issue mentioned by @camarrone .

it would be great if anyone could share the solution for this problem.

[JEEVANJGA]

Found a Fix for the issue I was facing.

Initially i had a span tag with style property set to "display:block".
on rendering, this tag was not getting into display since its parent had a background color.
So I removed this display property for the span tag and then tried again, span content got visible.
But I wanted the span tag to have this display property as per view requirements, so I changed span to div tag and added a span tag with content inside the new div tag. everything rendered perfectly as expected.

Initial code :

<div class="someClasswithbackgroundprops">
     <span style="display:block">content</span>
</div>

changed code :

<div class="someClasswithbackgroundprops">
     <div style="display:block">
         <span >content</span>
     </div>
</div>

On following this approach fixed the issue I faced :100: %
Hope this would help others as well.

[ivanbozhkov]

position:relative

on the element itself fixes it...