Blurry images (the same image in different nodes)


Sometimes i have a weird issue - the same image is showing multiple times, but some of them are blurry and other not (see marked area in the image).
The omage itself is PNG.


This is how i defined the group header:

    $(go.Panel, "Vertical",  // title above Placeholder
      { name: "GroupHeader", cursor: "pointer" },
      $(go.Panel, "Horizontal", { 
    	  	stretch: go.GraphObject.Horizontal, 
    	  	padding: 4 },
     		$(go.Picture, new go.Binding("source", "images", function(e) { return e[0]})),
	    	$(go.Picture, new go.Binding("source", "images", function(e) { return e[1]})),
		$(go.TextBlock, {
            alignment: go.Spot.Left,
            editable: false,
			isMultiline: false,
            margin: 5,
            font: topologyBasicFont,
            stroke: "white"
          }, new go.Binding("text", "label")
      	), new go.Binding("background", "isExceptionEntity", function(d) { return (d == "true") ? exceptionBackground : groupHeaderBackground; })
      ),  // end Horizontal Panel
      $(go.Panel, "Auto", { 
    	  opacity: nodeOpacity, 
    	  }, $(go.Shape, "Rectangle", {
    		  // the rectangular shape around the members
        	  name: "GroupShape",
              strokeWidth: 1,
              fill: nodeBackground,
         ,$(go.Panel, "Vertical", { 
        	 	defaultAlignment: go.Spot.Center 
	         $(go.Placeholder, { 
	         	 margin: go.Margin.parse("15 10 10 10"),
	         	 alignment: go.Spot.Center,
	         	 padding: 20,
    ),  // end Vertical Panel

My guess would be that the subpixel positioning of those Pictures are different. In the debugger could you get references to those two instances of Picture and call GraphObject.getDocumentPoint on them, passing go.Spot.TopLeft as the argument? I’m curious what the X,Y values are for each of those Pictures in document coordinates.