Cannot recognize html img tag style if add img tag dynamically

Author: CY-QiuCreated Dec 30, 2022Updated Dec 30, 2022

wkhtmltopdf version(s) affected: 0.12.6

OS information Windows 11

Description What we want: image What we have under current wkhtmltopdf: image

How to reproduce HTML code:

xml
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
	<script>
		window.onload = function (){
			picImage = document.createElement("img");
		   picImage.src = "data:image/png;base64,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";
			picImage.alt = "picture";
			// This style is not working in wkhtmltopdf
			picImage.style="position: absolute; top: 300px; left: 200px;";
			document.body.appendChild(picImage);
		}
	</script>
</head>

<body style="height:297mm; width:210mm;background-color:white;">
</body>

</html>

Expected behavior

When add html img tag dynamically, the style should be functional.

Possible Solution

I tried to add img tag statically, if so, the style can be functional successfully. However, the img is generated dynamically in our situation, so I cannot add img tag statically.