Background-image can see repeat leaking over sides of container

[joetann]

Hi,

I have containers which have a background image set to no-repeat and to contain the parent. This is the markup of the parent container that has the background image:

As you can see in the image below, the background images seem to leak over the edge of the parent:

This is the JS:

			var $targetToCanvas = jQuery("#logos-comparison-area")[0];
			// html2canvas($targetToCanvas, {

			html2canvas($targetToCanvas, {
				allowTaint: true,
				useCORS: true,
				letterRendering: true,
				scale: 2
			}).then(function(canvas) {
				var ctx = canvas.getContext('2d');
				ctx.webkitImageSmoothingEnabled = false;
				ctx.mozImageSmoothingEnabled = false;
				ctx.imageSmoothingEnabled = false;

				var url = canvas.toDataURL();
					$("<a>", {
						href: url,
						download: "LetsCommence.png"
					})
					.on("click", function() {$(this).remove()})
					.appendTo("body")[0].click();
			});

Any idea why this is happening or how I can fix it?

Thanks,
Joe

Specifications:

• html2canvas version tested with: html2canvas.1.0.0-alpha.9
• Browser & version: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
• Operating system: Mac OSX

[yj21world]

Have you solved this problem? I have the same problem