Textblock font issue on IE 11

I am having font issue in both the palette and the main canvas on IE and only on IE. I have created a CSS bridge that peeps into the stylesheet and builds the font string either from parts or pulls the entire spec if it exists. For the example I site here (which is in my palette), the font I am trying to assign is:

“1rem/normal AvenirNext, Helvetica, Arial, sans-serif”

incidentally, in chrome, that font comes out of the css as:
“1rem AvenirNext, Helvetica, Arial, sans-serif”

However, manipulation in IE to match the spec used by chrome makes no difference.

here is how I use the font. If I take the font out, everything displays OK (not what I want, but readible). What I see with the font spec is at the very bottom of this post along with what I see if I remove the font spec altogether… I apologize if I am missing something obvious, but … what am I doing

var nodeTemplate = this.goJS(go.Node, this.GOJS_HORIZONTAL,
            {

                desiredSize:new go.Size(this._getPaletteContainerWidth()*.90,40),
                selectionAdorned: false,
                mouseOver: $.proxy(this._paletteNodeMouseOver,this),
                mouseLeave: $.proxy(this._paletteNodeMouseLeave,this)
            },
            this.goJS(go.Panel, this.GOJS_HORIZONTAL,
                {
                    desiredSize:new go.Size(this._getPaletteContainerWidth()*.90,40),
                    background:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_ITEM_CSS_CLASSNAME, this.CSS.STYLE_BACKGROUND_COLOR),
                    name: this.OBJECT_LABEL_PANEL,
                    margin: new go.Margin(8, 0, 8, 10),
                },

                this.goJS(go.Shape,{
                        name: this.OBJECT_LABEL_PICTURE,
                        margin: new go.Margin(0, 2, 0, 2),
                        stroke:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_NODE_ICON_CSS_CLASSNAME, this.CSS.STYLE_COLOR),
                        fill:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_NODE_ICON_CSS_CLASSNAME, this.CSS.STYLE_FILL),
                        strokeWidth: pictureStrokeWidth
                    },
                    new go.Binding(this.GOJS_GEOMETRYSTRING, this.DATA_ATTRIBUTE_KEY,function(key){
                        //when a drag starts from within the palette, a index Number is appended to the key.
                        key=key.match(/[a-zA-Z]*/)[0];
                        switch(key){
                            case sas.dcmcommon.util.Constants.GraphNodeCategory.CONDITION:
                                return sas.decisionmanager.visualeditor.util.PaletteSVGPaths.CONDITION_ICON;
                            case sas.dcmcommon.util.Constants.GraphNodeCategory.RULESET:
                                return sas.decisionmanager.visualeditor.util.PaletteSVGPaths.RULESET_ICON;
                            case sas.dcmcommon.util.Constants.GraphNodeCategory.MODEL:
                                return sas.decisionmanager.visualeditor.util.PaletteSVGPaths.MODEL_ICON;
                            default:
                                break;
                        }
                    })
                ),
                this.goJS(go.TextBlock, {
                        desiredSize:new go.Size(this._getPaletteContainerWidth()*.75,20),
                        textAlign: "left",
                        name: this.OBJECT_LABEL_TEXTBLOCK,
                        margin: new go.Margin(0, 0, 0, 25),
                        stroke:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_NODE_TEXT_CSS_CLASSNAME, this.CSS.STYLE_FONT_COLOR),
                        font:defaultFont
                    },
                    new go.Binding(this.GOJS_TEXT, this.GOJS_TEXT)
                ),
                this.goJS(go.Shape,{
                        geometryString: sas.decisionmanager.visualeditor.util.PaletteSVGPaths.PALETTE_NODE_RIGHT_HOVER_DECORATOR,
                        stretch:go.GraphObject.Horizontal,
                        name:this.GOJS_SHAPE,
                        fill:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_ITEM_CSS_CLASSNAME, this.CSS.STYLE_BACKGROUND_COLOR),
                        stroke:this.CSS.getStyleValue(this.PALLETE_STYLE_HIDDEN_DIV, this.PALETTE_ITEM_CSS_CLASSNAME, this.CSS.STYLE_BORDER_COLOR)
                    }
                )
            )

        );

WITH font, I see:

WITHOUT font, I see:

Apparently, that thing that looks like a dash or a hyphen is actually the font, rendered very very very small.

This seems to be a bug in IE. It doesn’t seem to be respecting REM sizes. This is not a GoJS bug, but affects all canvas font setting. See: https://codepen.io/simonsarris/pen/yXMPEL for an example.

You may need to convert font strings from “1rem” to your pixel equivalent (16px, etc) before you set the TextBlock.font, to be safe.

They did fix this in IE edge.

Thank you. that was the problem. after converting REM to px, all works as expected.