Shadow under IE/Edge not working property

GoJS
1

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

IE/Edge:

Chrome:

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

How could I fix it?

Thanks,
Chuan

2

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

3

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

goDiagram.nodeTemplateMap.add("",
                $(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
                    $(go.Picture,
                        {
                            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;
            }
        }
4

And also, the img_shape is a svg

5

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

6

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.

7

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.

8

Any other thought?

9

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.

10

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

-Chuan

12

Any update?

13

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<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";
</script>

</body>
</html>