Giters

1904labs / dom-to-image-more

Generates an image from a DOM node using HTML5 canvas

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

In Firefox, if svg images are used for background/background-image properties they render correctly only when the page is refreshed

YoshiWalsh opened this issue · comments

commented

Min-Reprex & Steps to reproduce

  1. Open this page in a new tab. This page is divided into three sections, each divided by horizontal rules. The top section indicates the status.
  2. Wait until the status says "Completed!". The second section is the source DOM. The third section contains the rendered PNG image. Observe that the third section is blank.
  3. Refresh the page. Wait for the "Completed!" status. Observe that the third section now matches the second section.

The full source code for the reprex can be found here.

The build hosted on my website also has full sourcemaps, so you can debug it there if that's easier.

Expected behavior

The image should consistently render correctly.

Actual behavior (stack traces, console logs etc)

The image does not render the first time the page is opened in a tab.

Other notes

  • This does NOT happen with <img> elements
  • This does NOT happen if a jpg is used as a background-image
  • This DOES happen even with the browser cache disabled
  • This does NOT happen if you call toPng a second time after the first call completes
  • This DOES still happen even if we wait 1,000ms between applyOptions and makeSvgDataUri
  • This DOES still happen even if we wait 1,000ms between draw and canvas.toDataURL
  • This DOES NOT happen if we wait 1ms between util.makeImage and drawing to the canvas

Based on this, it seems that sometimes when Firefox calls the onload event for an img element, if the image is an svg which contains background-image properties that are inline SVGs, the SVGs might actually take one extra frame before they are rendered. During this time if the image is drawn to a canvas it will be missing these embeded SVGs.

Library version

3.1.0

Browsers

  • ✔️ - Chrome 49+
  • ❌ - Firefox 45+
commented

I actually think this might be a Firefox bug, but I'll leave this open because it's probably easier to add a workaround than to get FF to fix it.

Edit: Opened a bug with FF: webcompat/web-bugs#119834