background doesn't convert correctly image base64 in Firefox

[Zolyder]

Use case:

When I try to convert a tag <div id='coversheet' className={classes.containerCoversheet}></div> toJpeg() or toPng, it returns just a block with the color that I selected but the image isn't there. I'm using React too.

useEffect(() => {
    var node = document.getElementById('coversheet')

    const convertHtmlToImage = async () => {
      const image = await domToImage.toJpeg(node, { quality: 1 })
      setCoversheetBase64(image)
    }
    convertHtmlToImage()
  }, [])

The css styles are:

  containerCoversheet: props => ({
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    right: 0,
    left: 0,
    bottom: 0,
    top: 0,
    width: '100%',
    height: '600px',
    backgroundImage: `
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 100%),

    linear-gradient(0deg, ${props.primaryColor ? props.primaryColor.rgb : 'white'}, ${
      props.primaryColor ? props.primaryColor.rgb : 'white'
    }),

    linear-gradient(0deg, #000000, #000000),
    url('${props.cover}')
    `,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundBlendMode: `normal, lighten, color, normal`,
    objectFit: 'cover',
    zIndex: -3,
  }),
}))

Expected behavior

In Chrome and Edge browsers works great as you can see.

Actual behavior (stack traces, console logs etc)

In firefox happens this problem:

Library version

"dom-to-image": "^2.6.0"

Browsers

• [x] Chrome 49+
• [] Firefox 45+