Background Color or Image take full rectangle, not inline

[donohoe]

I have multiple span tags in a paragraph.

When I have one of those span tags with a background-color or background-image it will treat it will encompass areas outside of the SPAN and give an entire rectangle that background.

This is an example of two SPAN tags with different background colors. The top part of the image represents the result from html2canvas, while the lower part of this image shows the DOM view:

Any way to avoid this?

Again, using a background-color or background-image have the same result.

Using Chrome Version 41.0.2272.64 beta (64-bit) on OSX.

[claudiomedina]

Any solution on this?

[niklasvh]

Is this still an issue with v1.0.0? If so, could you please share an example on jsfiddle.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[ftoh]

@niklasvh Yes. http://jsfiddle.net/az5j0766/336/

[volser]

Any solution? Why it's closed?

[fellnerse]

Looking forward for a fix 🥳

[johnozbay]

@niklasvh this is still a problem in 1.3.2, and you can see it here : http://jsfiddle.net/bd82oy5x/

^ It's an updated version (using v1.3.2) of the minimum reproducible example @FTOH posted here.

Discovered this while using html2pdf and perhaps @eKoopmans could bring more examples as well.

Here's all the issues I found that seems to be related to this problem : https://github.com/niklasvh/html2canvas/issues/2447 https://github.com/niklasvh/html2canvas/issues/1497 https://github.com/niklasvh/html2canvas/issues/1742

--

And here's an example from html2pdf, that I think is related to this issue : https://github.com/eKoopmans/html2pdf.js/issues/280

--

If you can point me the right direction, I'd be happy to work on a solution full time and file a PR for this.

Many thanks for all the great work you've been putting out, Best, J

[johnozbay]

An interesting discovery : http://jsfiddle.net/bakg3sz6/

Looks like this is somehow about the order of rendering / drawing the background-color. I changed the background color to a semi-transparent one, and now it's possible to see the text through the background, confirming that the background color is somehow drawn over the text :

I'm guessing this is happening because even the inspector/browser itself highlights this span element as full width :

So when html2canvas tries to read the element's width/height, understandably it reads the width & height of the whole box for the element, and draws the background color for the whole area in full.

Discovering this, I'm no longer entirely sure if there's a solution to this problem. Off the top of my head, a duct-tape horrible fix is to iterate elements in reverse order so that text is drawn over the background first. OR to read the parent's background color (i.e. white) and draw the following elements with white background, but I'm guessing both of these would require significant changes to the library.

[eKoopmans]

☝️ Hey I don't have too much context for this, but it looks like (from your first fiddle) adding the foreignObjectRendering: true option to html2canvas resolves the issue?

[johnozbay]

Hey there @eKoopmans! Thanks for the ping!

In the reproducible example foreignObjectRendering does solve the problem, however with foreignObjectRendering enabled, html2pdf seemed to generate blank PDF pages in our implementation. And when disabled – the issue above seemed to happen.

The band-aid solution we came up with for this problem is to split sentences with background-color into separate words (incl spaces), put each word into a new span, and style span elements individually with background-color, right before exporting the canvas to PDF.

This way, for our use case, none of the words/spans are multiple-lines long, and background colors don't overlap / cover other elements. It's a hacky workaround, but seems to be efficient enough for our use case, and hopefully would save someone else another minute or two of head scratching. 😅