Shadow under IE/Edge not working property

I just realize the shadow is not working properly under IE/Edge.



As you can see, the z-index seems wrongly under IE/Edge.

How could I fix it?


That’s strange. Can you share your node template?

Sure. Basically, I was like to see the shadow only comes out during moving a node

                $(go.Node, "Spot",
                    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                        locationSpot: go.Spot.Center,
                        selectionAdornmentTemplate: nodeSelectionAdornmentTemplate
                        mouseEnter: onDiagrammingNodeMouseEnter,
                        mouseLeave: onDiagrammingNodeMouseLeave
                        isShadowed: true,
                        shadowBlur: 2,
                        shadowColor: "rgba(0, 0, 0, 0.4)",
                        shadowOffset: new go.Point(3, 3)
                    // the main object is a Panel that surrounds a TextBlock with a Shape
                            name: "SHAPE",
                            shadowVisible: false
                        new go.Binding("source", "img_shape"),
                        new go.Binding("text", "tootip_shape")),
                    new go.Binding("desiredSize", "size_shape"),
                    makePort("T", go.Spot.Top, true, true, true, true),
                    makePort("L", go.Spot.Left, true, true, true, true),
                    makePort("R", go.Spot.Right, true, true, true, true),
                    makePort("B", go.Spot.Bottom, true, true, true, true)

           goDiagram.toolManager.draggingTool.doDragOver = function (pt, obj) {
                goDiagram.selection.each(function (node) {
                    showShadow(node, "SHAPE", true);

        function showShadow(node: any, name: string, visible: boolean) {
            if (!node) return;

            var element = node.findObject(name);
            if (element) {
                element.shadowVisible = visible;

And also, the img_shape is a svg

I’m seeing something slightly concerning, that the shadow does not appear until I move the node, but otherwise it looks the same in IE and Chrome

Ah. IE has all sorts of issues with SVG images. Be sure to see the final section of this intro page and follow all those rules.

I even tried to set shadowVisible to always true, the same effect.

I have followed all those suggestions I thought. I can see the svg under IE without any issue, before applying shadow.

Any other thought?

If it’s an SVG source then it’s unlikely we’d be able to do anything as it’s probably a bug in IE. If you want to share the SVG with us we could try and confirm that it’s definitely IE and not GoJS.

Sure. It doesn’t allow me to attach a svg here. So send you an email.


Any update?

Yes, this is a bug in IE. Here’s an example of the bug in Canvas, without using GoJS at all:

<!DOCTYPE html>

<canvas id="can"></canvas>

<script type="text/javascript">
    var can = document.getElementById('can');
    var ctx = can.getContext('2d');
    ctx.shadowColor = '#999';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = 15;
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0)
    img.src = "Shape_Feedback.svg";