enhanced reliability

lib/single-file/doc-helper.js

@@ -160,11 +160,8 @@ this.docHelper = this.docHelper || (() => {
 			const data = [];
 			doc.querySelectorAll("img[src]").forEach((imageElement, imageElementIndex) => {
 				imageElement.setAttribute(imagesAttributeName(options.sessionId), imageElementIndex);
-				let imageData;
-				const computedStyle = getComputedStyle(imageElement);
-				const paddingIsSet = computedStyle.padding && computedStyle.padding != "0px";
-				const marginIsSet = computedStyle.margin && computedStyle.margin != "0px";
-				if (imageElement.src && !paddingIsSet && !marginIsSet) {
+				let imageData = {};
+				if (imageElement.src && isFullBox(imageElement) && !imageElement.getAttribute("width") && !imageElement.getAttribute("height")) {
 					let naturalWidth = imageElement.naturalWidth;
 					let naturalHeight = imageElement.naturalHeight;
 					if (naturalWidth <= 1 && naturalHeight <= 1) {
@@ -177,16 +174,16 @@ this.docHelper = this.docHelper || (() => {
 					}
 					const clientWidth = imageElement.clientWidth;
 					const clientHeight = imageElement.clientHeight;
-					imageData = {
-						width: imageElement.width,
-						height: imageElement.height,
-						clientWidth,
-						clientHeight,
-						naturalWidth,
-						naturalHeight
-					};
-				} else {
-					imageData = {};
+					if (clientHeight && clientWidth) {
+						imageData = {
+							width: imageElement.width,
+							height: imageElement.height,
+							clientWidth,
+							clientHeight,
+							naturalWidth,
+							naturalHeight
+						};
+					}
 				}
 				data.push(imageData);
 			});
@@ -194,6 +191,14 @@ this.docHelper = this.docHelper || (() => {
 		}
 	}
 
+	function isFullBox(imageElement) {
+		const computedStyle = getComputedStyle(imageElement);
+		const paddingIsSet = computedStyle.paddingLeft != "0px" || computedStyle.paddingRight != "0px" || computedStyle.paddingBottom != "0px" || computedStyle.paddingTop != "0px";
+		const marginIsSet = computedStyle.marginLeft != "0px" || computedStyle.marginRight != "0px" || computedStyle.marginBottom != "0px" || computedStyle.marginTop != "0px";
+		const borderIsSet = computedStyle.borderLeftWidth != "0px" || computedStyle.borderRightWidth != "0px" || computedStyle.borderBottomWidth != "0px" || computedStyle.borderTopWidth != "0px";
+		return !paddingIsSet && !marginIsSet && !borderIsSet;
+	}
+
 	function getResponsiveImageData(doc, options) {
 		if (doc) {
 			const data = [];

lib/single-file/html-images-minifier.js

@@ -145,6 +145,8 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 						});
 						svgElement.setAttribute(TRANSFORMED_IMAGE_ATTRIBUTE, "");
 						svgElement.setAttributeNS(SVG_NS, "viewBox", "0 0 " + width + " " + height);
+						svgElement.setAttributeNS(SVG_NS, "width", imageData.clientWidth);
+						svgElement.setAttributeNS(SVG_NS, "height", imageData.clientHeight);
 						svgElement.setAttributeNS(SVG_NS, "preserveAspectRatio", "none");
 						useElement.setAttributeNS(SVG_NS, "xlink:href", "#single-file-" + urlIndex);
 						const imageElement = doc.getElementById("single-file-" + urlIndex);