Fontsize error on IE but correct on Chrome

[Anonymous]

Hello, I have a weird situation....My custom visual on Chrome displays just fine, but on IE and Edge, the font size was changed....not sure why.  My font size was driven by a user typed filled in the object and default value is set to 55.  On Chrome displayed as we expected.  Anyone experiencing the same?

code behind for the viewmodel, although I don't think it was caused by my viewmodel:

     Mainmeasure: {
                    text: '(blank)',
                    attributes: [
                        {
                            key: 'x',
                            value: `${viewportWidth / 2}`
                        },
                        {
                            key: 'y',
                            value: `${viewportHeight * visualSettings.card.MainValueY / 100}`
                        },
                        {
                            key: 'text-anchor',
                            value: 'middle'
                        },
                        {
                            key: 'alignment-baseline',
                            value: 'middle'
                        }
                    ],
                    styles: [
                        {
                            key: 'font-size',
                            value: `${MainValue_FontSize}`
                        },
                        {
                            key: 'font-family',
                            value: 'Bebas Neue'
                        },
                        {
                            key: 'fill',
                            value: MainValue_FontColor
                        },
                        {
                            key: 'font-weight',
                            value: 'bold'
                        }
                    ]
                },

and in the visual.ts

.....
 viewModel.card.Mainmeasure.styles.map((s) => {
                this.MainValue.style(s.key, s.value);
            });
......

[dm-p · Accepted solution]

Hi @Anonymous,

It might be that you are not specifying the CSS unit for the font-size. If you're using a fontSize type for your object in capabilities.json, these would need to be in pt. It's likely that IE has different behaviour to Chrome when just a number is supplied as the font size.

Try replacing this:

{
    key: 'font-size',
    value: `${MainValue_FontSize}`
}

With this:

{
    key: 'font-size',
    value: `${MainValue_FontSize}pt`
}

That might be all you need.

Good luck!

Daniel

[Anonymous]

@dm-p  Thanks! That solved the problem.