It doesn't work on some instances

[4skinSkywalker]

<div bone="">
    
</div>
<div boneterminal1=""></div>
<div boneterminal2=""></div>
<div boneterminal3=""></div>
<div boneterminal4=""></div>
<div bone2="">
    
</div>
<div boneterminal1=""></div>
<div boneterminal2=""></div>
<div boneterminal3=""></div>
<div boneterminal4=""></div>
<style>
    body {
        background: #f0f0a0;
        display: grid;
        place-items: center;
    }
	* {
	    grid-area: 1/1;
	}
	[bone], [bone2] {
	    background: #8c50dc;
	    width: 30px;
	    height: 170px;
	}
	[bone] {
	}
	[bone2] {
	}
	[boneTerminal1], [boneTerminal2], [boneTerminal3], [boneTerminal4] {
	    position: absolute;
	    top: 0;
	    left: 0;
	    background: #8c50dc;
	    width: 30px;
	    height: 30px;
	    border-radius: 50%;
	}
	[boneTerminal1] {
	    top: -25px;
	    left: 14px;
	    border-bottom-left-radius: 0;
	}
	[boneTerminal2] {
	    top: -25px;
	    left: -14px;
	    border-bottom-right-radius: 0;
	}
	[boneTerminal3] {
	    bottom: -25px;
	    left: 14px;
	    border-top-left-radius: 0;
	}
	[boneTerminal4] {
	    bottom: -25px;
	    left: -14px;
	    border-top-right-radius: 0;
	}
</style>

var outputIframe = document.querySelector('#output-iframe');
var outputIframeBody = outputIframe.contentWindow.document.body;
domtoimage.toPng(outputIframeBody).then(console.log);

The above code results in the image below which is incorrect.