jsPlumb Connector Paint Style Gradient inconsistent - jsplumb

Question

Issue: Connector paint style gradients don't always gradient.
I am creating connections between a few HTML elements on my page. To look nice, I'm aiming to have the connection lines painted as a gradient, starting with the source point being the color of the source object's background color, and the target point being the color of the target object's background color. It's working well, but not for each connection, which is strange.
This code creates the connections, it's wrapped in a function so I can call it with each "$(object).each" iteration.
Here is the full function:
createConnection = (source_id, target_id, source_color, target_color) =>
console.log "source color : "+ source_color + " | target color : " + target_color
jsPlumb.connect({
source: source_id,
target: target_id,
anchors:["Bottom", "Top"],
connector: ["Bezier", { curviness: 60 }],
endpointStyles:[
{ fillStyle: source_color },
{ fillStyle: target_color },
],
paintStyle: {
gradient: { stops: [
[ 0, source_color ],
[ 1, target_color ]
] },
strokeStyle: "#fff",
lineWidth: 13
},
endpoint: ["Dot", { radius: 10 }],
});
(Code is written in CoffeeScript, btw)
The gradients work well in certain scenarios, but not all. Let me show you:
Here we have a scenario where each object has one child. This is where none of them work:
Console output from this:
source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
Notice the endpoints are working correctly, just not the connection lines.
Here is where I added an object, you can see that some of the gradients do work perfectly, some work partially, and some don't work at all. here:
Here is the console output:
(2) source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
The (2) shows us that the first two connections use the same colors, both worked. In this example, only the last connector didn't work.
Here is another example, with another child added to "Hyperproduct X".
Console output:
(2) source color : rgb(30, 47, 109) | target color : rgb(61, 117, 150)
source color : rgb(61, 117, 150) | target color : rgb(51, 185, 191)
(2) source color : rgb(51, 185, 191) | target color : rgb(70, 173, 125)
In this last image, you'll notice that all of the connectors are painted correctly.
This is so weird! Why don't they work for all configurations?
Thanks in advance for any guidance or help.