Image exports are not working in FireFox when using styled mode from Highcharts v10.1 and up

[svensigmond]

Expected behaviour

An image version of the chart is exported

Actual behaviour

Nothing happens, the console shows the following error:
Uncaught TypeError: CSS2Properties doesn't have an indexed property setter for '347'

From what I managed to debug, an object of filteredStyles is created which looks like this:

{ 347: "--success-background-color" 348: "--error-background-color" 349: "--error-color" 350: "--focus-background-color" 351: "--focus-color" 352: "--hover-background-color" 353: "--hover-color" 354: "--node-blur-color" 355: "--node-focus-color" 356: "--color-18" 357: "--color-17" 358: "--color-16" 359: "--color-15" 360: "--color-14" 361: "--color-13" 362: "--color-12" 363: "--color-11" 364: "--color-10" 365: "--color-9" 366: "--color-8" 367: "--color-7" 368: "--color-6" 369: "--color-5" 370: "--color-4" 371: "--color-3" 372: "--color-2" 373: "--color-1" 374: "--mask-color" 375: "--active-color" 376: "--muted-color" 377: "--border-alt-color" 378: "--border-color" 379: "--ix-highlight-color" 380: "--ix-color" 381: "--background-alt-color" 382: "--background-highlight-color" 383: "--background-color" 384: "--foreground-alt-color" 385: "--foreground-color" 386: "--grid-gap" 387: "--font-base-size" 388: "--font-weight-bold" 389: "--font-weight-normal" 390: "--font-weight-light" 391: "--font-label" 392: "--font-display" 393: "--font-default" 394: "--font-monospace" 395: "--cell-padding" 396: "--pref-chart-height" 397: "--border-size-l" 398: "--border-size-m" 399: "--font-size-xxxl" 400: "--font-size-xxl" 401: "--font-size-xl" 402: "--font-size-l" 403: "--font-size-m" 404: "--font-size-s" 405: "--grid-gap-xxs" 406: "--grid-gap-xs" 407: "--grid-gap-s" 408: "--unvalidated-node-blur-color" 409: "--unvalidated-node-focus-color" 410: "--validated-node-blur-color" 411: "--validated-node-focus-color" 412: "--unvalidated-success-background-color" 413: "--unvalidated-success-color" 414: "--unvalidated-error-background-color" 415: "--unvalidated-error-color" 416: "--unvalidated-focus-background-color" 417: "--unvalidated-focus-color" 418: "--unvalidated-hover-background-color" 419: "--unvalidated-hover-color" 420: "--validated-success-background-color" 421: "--validated-success-color" 422: "--validated-error-background-color" 423: "--validated-error-color" 424: "--validated-focus-background-color" 425: "--validated-focus-color" 426: "--validated-hover-background-color" 427: "--validated-hover-color" 428: "--unvalidated-mask-color" 429: "--unvalidated-active-color" 430: "--unvalidated-muted-color" 431: "--unvalidated-color-18" 432: "--unvalidated-color-17" 433: "--unvalidated-color-16" 434: "--unvalidated-color-15" 435: "--unvalidated-color-14" 436: "--unvalidated-color-13" 437: "--unvalidated-color-12" 438: "--unvalidated-color-11" 439: "--unvalidated-color-10" 440: "--unvalidated-color-9" 441: "--unvalidated-color-8" 442: "--unvalidated-color-7" 443: "--unvalidated-color-6" 444: "--unvalidated-color-5" 445: "--unvalidated-color-4" 446: "--unvalidated-color-3" 447: "--unvalidated-color-2" 448: "--unvalidated-color-1" 449: "--unvalidated-border-alt-color" 450: "--unvalidated-border-color" 451: "--unvalidated-ix-highlight-color" 452: "--unvalidated-ix-color" 453: "--unvalidated-background-highlight-color" 454: "--unvalidated-background-alt-color" 455: "--unvalidated-background-color" 456: "--unvalidated-foreground-alt-color" 457: "--unvalidated-foreground-color" 458: "--validated-mask-color" 459: "--validated-active-color" 460: "--validated-muted-color" 461: "--validated-color-18" 462: "--validated-color-17" 463: "--validated-color-16" 464: "--validated-color-15" 465: "--validated-color-14" 466: "--validated-color-13" 467: "--validated-color-12" 468: "--validated-color-11" 469: "--validated-color-10" 470: "--validated-color-9" 471: "--validated-color-8" 472: "--validated-color-7" 473: "--validated-color-6" 474: "--validated-color-5" 475: "--validated-color-4" 476: "--validated-color-3" 477: "--validated-color-2" 478: "--validated-color-1" 479: "--validated-border-alt-color" 480: "--validated-border-color" 481: "--validated-ix-highlight-color" 482: "--validated-ix-color" 483: "--validated-background-highlight-color" 484: "--validated-background-alt-color" 485: "--validated-background-color" 486: "--validated-foreground-alt-color" 487: "--validated-foreground-color" MozAnimation: "0s ease 0s 1 normal none running none" MozAnimationDelay: "0s" MozAnimationDirection: "normal" MozAnimationDuration: "0s" MozAnimationFillMode: "none" MozAnimationIterationCount: "1" MozAnimationName: "none" MozAnimationPlayState: "running" MozAnimationTimingFunction: "ease" MozAppearance: "none" MozBackfaceVisibility: "visible" MozBorderEnd: "0px none rgb(66, 66, 66)" MozBorderEndColor: "rgb(66, 66, 66)" MozBorderEndStyle: "none" MozBorderEndWidth: "0px" MozBorderImage: "none 100% / 1 / 0 stretch" MozBorderStart: "0px none rgb(66, 66, 66)" MozBorderStartColor: "rgb(66, 66, 66)" MozBorderStartStyle: "none" MozBorderStartWidth: "0px" MozBoxAlign: "stretch" MozBoxDirection: "normal" MozBoxFlex: "0" MozBoxOrdinalGroup: "1" MozBoxOrient: "horizontal" MozBoxPack: "start" MozBoxSizing: "border-box" MozFloatEdge: "content-box" MozFontFeatureSettings: "normal" MozFontLanguageOverride: "normal" MozForceBrokenImageIcon: "0" MozHyphens: "manual" MozImageRegion: "auto" MozMarginEnd: "0px" MozMarginStart: "0px" MozOrient: "inline" MozPaddingEnd: "0px" MozPaddingStart: "0px" MozPerspective: "none" MozPerspectiveOrigin: "502px 267.5px" MozTabSize: "8" MozTextSizeAdjust: "auto" MozTransform: "none" MozTransformOrigin: "502px 267.5px" MozTransformStyle: "flat" MozTransition: "all 0s ease 0s" MozTransitionDelay: "0s" MozTransitionDuration: "0s" MozTransitionProperty: "all" MozTransitionTimingFunction: "ease" MozUserFocus: "none" MozUserInput: "auto" MozUserModify: "read-only" MozUserSelect: "auto" MozWindowDragging: "default" WebkitAlignContent: "normal" WebkitAlignItems: "normal" WebkitAlignSelf: "auto" WebkitAnimation: "0s ease 0s 1 normal none running none" WebkitAnimationDelay: "0s" WebkitAnimationDirection: "normal" WebkitAnimationDuration: "0s" WebkitAnimationFillMode: "none" WebkitAnimationIterationCount: "1" WebkitAnimationName: "none" WebkitAnimationPlayState: "running" WebkitAnimationTimingFunction: "ease" WebkitAppearance: "none" WebkitBackfaceVisibility: "visible" WebkitBackgroundClip: "border-box" WebkitBackgroundOrigin: "padding-box" WebkitBackgroundSize: "auto" WebkitBorderBottomLeftRadius: "0px" WebkitBorderBottomRightRadius: "0px" WebkitBorderImage: "none 100% / 1 / 0 stretch" WebkitBorderRadius: "0px" WebkitBorderTopLeftRadius: "0px" WebkitBorderTopRightRadius: "0px" WebkitBoxAlign: "stretch" WebkitBoxDirection: "normal" WebkitBoxFlex: "0" WebkitBoxOrdinalGroup: "1" WebkitBoxOrient: "horizontal" WebkitBoxPack: "start" WebkitBoxShadow: "none" WebkitBoxSizing: "border-box" WebkitFilter: "none" WebkitFlex: "0 1 auto" WebkitFlexBasis: "auto" WebkitFlexDirection: "row" WebkitFlexFlow: "row nowrap" WebkitFlexGrow: "0" WebkitFlexShrink: "1" WebkitFlexWrap: "nowrap" WebkitJustifyContent: "normal" WebkitLineClamp: "none" WebkitMask: "none" WebkitMaskClip: "border-box" WebkitMaskComposite: "add" WebkitMaskImage: "none" WebkitMaskOrigin: "border-box" WebkitMaskPosition: "0% 0%" WebkitMaskPositionX: "0%" WebkitMaskPositionY: "0%" WebkitMaskRepeat: "repeat" WebkitMaskSize: "auto" WebkitOrder: "0" WebkitPerspective: "none" WebkitPerspectiveOrigin: "502px 267.5px" WebkitTextFillColor: "rgb(66, 66, 66)" WebkitTextSizeAdjust: "auto" WebkitTextStroke: "0px rgb(66, 66, 66)" WebkitTextStrokeColor: "rgb(66, 66, 66)" WebkitTextStrokeWidth: "0px" WebkitTransform: "none" WebkitTransformOrigin: "502px 267.5px" WebkitTransformStyle: "flat" WebkitTransition: "all 0s ease 0s" WebkitTransitionDelay: "0s" WebkitTransitionDuration: "0s" WebkitTransitionProperty: "all" WebkitTransitionTimingFunction: "ease" WebkitUserSelect: "auto" accentColor: "auto" alignContent: "normal" alignItems: "normal" alignSelf: "auto" all: "" animation: "0s ease 0s 1 normal none running none" animationDelay: "0s" animationDirection: "normal" animationDuration: "0s" animationFillMode: "none" animationIterationCount: "1" animationName: "none" animationPlayState: "running" animationTimingFunction: "ease" appearance: "none" aspectRatio: "auto" backfaceVisibility: "visible" background: "rgba(0, 0, 0, 0) none repeat scroll 0% 0%" backgroundAttachment: "scroll" backgroundBlendMode: "normal" backgroundClip: "border-box" backgroundColor: "rgba(0, 0, 0, 0)" backgroundImage: "none" backgroundOrigin: "padding-box" backgroundPosition: "0% 0%" backgroundPositionX: "0%" backgroundPositionY: "0%" backgroundRepeat: "repeat" backgroundSize: "auto" blockSize: "535px" border: "0px none rgb(66, 66, 66)" borderBlock: "0px none rgb(66, 66, 66)" borderBlockColor: "rgb(66, 66, 66)" borderBlockEnd: "0px none rgb(66, 66, 66)" borderBlockEndColor: "rgb(66, 66, 66)" borderBlockEndStyle: "none" borderBlockEndWidth: "0px" borderBlockStart: "0px none rgb(66, 66, 66)" borderBlockStartColor: "rgb(66, 66, 66)" borderBlockStartStyle: "none" borderBlockStartWidth: "0px" borderBlockStyle: "none" borderBlockWidth: "0px" borderBottom: "0px none rgb(66, 66, 66)" borderBottomColor: "rgb(66, 66, 66)" borderBottomLeftRadius: "0px" borderBottomRightRadius: "0px" borderBottomStyle: "none" borderBottomWidth: "0px" borderCollapse: "separate" borderColor: "rgb(66, 66, 66)" borderEndEndRadius: "0px" borderEndStartRadius: "0px" borderImage: "none 100% / 1 / 0 stretch" borderImageOutset: "0" borderImageRepeat: "stretch" borderImageSlice: "100%" borderImageSource: "none" borderImageWidth: "1" borderInline: "0px none rgb(66, 66, 66)" borderInlineColor: "rgb(66, 66, 66)" borderInlineEnd: "0px none rgb(66, 66, 66)" borderInlineEndColor: "rgb(66, 66, 66)" borderInlineEndStyle: "none" borderInlineEndWidth: "0px" borderInlineStart: "0px none rgb(66, 66, 66)" borderInlineStartColor: "rgb(66, 66, 66)" borderInlineStartStyle: "none" borderInlineStartWidth: "0px" borderInlineStyle: "none" borderInlineWidth: "0px" borderLeft: "0px none rgb(66, 66, 66)" borderLeftColor: "rgb(66, 66, 66)" borderLeftStyle: "none" borderLeftWidth: "0px" borderRadius: "0px" borderRight: "0px none rgb(66, 66, 66)" borderRightColor: "rgb(66, 66, 66)" borderRightStyle: "none" borderRightWidth: "0px" borderSpacing: "0px 0px" borderStartEndRadius: "0px" borderStartStartRadius: "0px" borderStyle: "none" borderTop: "0px none rgb(66, 66, 66)" borderTopColor: "rgb(66, 66, 66)" borderTopLeftRadius: "0px" borderTopRightRadius: "0px" borderTopStyle: "none" borderTopWidth: "0px" borderWidth: "0px" bottom: "auto" boxDecorationBreak: "slice" boxShadow: "none" boxSizing: "border-box" breakAfter: "auto" breakBefore: "auto" breakInside: "auto" captionSide: "top" caretColor: "rgb(66, 66, 66)" clear: "none" clip: "auto" clipRule: "nonzero" color: "rgb(66, 66, 66)" colorAdjust: "economy" colorInterpolation: "srgb" colorInterpolationFilters: "linearrgb" colorScheme: "normal" columnCount: "auto" columnFill: "balance" columnGap: "normal" columnRule: "3px none rgb(66, 66, 66)" columnRuleColor: "rgb(66, 66, 66)" columnRuleStyle: "none" columnRuleWidth: "0px" columnSpan: "none" columnWidth: "auto" columns: "auto auto" contain: "none" content: "normal" counterIncrement: "none" counterReset: "none" counterSet: "none" cssFloat: "none" cursor: "auto" cx: "0px" cy: "0px" direction: "ltr" display: "block" dominantBaseline: "auto" emptyCells: "show" fillOpacity: "1" fillRule: "nonzero" filter: "none" flex: "0 1 auto" flexBasis: "auto" flexDirection: "row" flexFlow: "row nowrap" flexGrow: "0" flexShrink: "1" flexWrap: "nowrap" float: "none" floodColor: "rgb(0, 0, 0)" floodOpacity: "1" fontFamily: "\"BnpMono\", \"Monaco\", \"Consolas\", \"Lucida Sans Typewriter\", monospace" fontFeatureSettings: "normal" fontKerning: "auto" fontLanguageOverride: "normal" fontOpticalSizing: "auto" fontSize: "13.1703px" fontSizeAdjust: "none" fontStretch: "100%" fontStyle: "normal" fontSynthesis: "weight style small-caps" fontVariant: "normal" fontVariantAlternates: "normal" fontVariantCaps: "normal" fontVariantEastAsian: "normal" fontVariantLigatures: "normal" fontVariantNumeric: "normal" fontVariantPosition: "normal" fontVariationSettings: "normal" fontWeight: "400" gap: "normal" grid: "none" gridArea: "auto" gridAutoColumns: "auto" gridAutoFlow: "row" gridAutoRows: "auto" gridColumn: "auto" gridColumnEnd: "auto" gridColumnGap: "normal" gridColumnStart: "auto" gridGap: "normal" gridRow: "auto" gridRowEnd: "auto" gridRowGap: "normal" gridRowStart: "auto" gridTemplate: "none" gridTemplateAreas: "none" gridTemplateColumns: "none" gridTemplateRows: "none" hyphenateCharacter: "auto" hyphens: "manual" imageOrientation: "from-image" imageRendering: "auto" imeMode: "auto" inlineSize: "1004px" inset: "auto" insetBlock: "auto" insetBlockEnd: "auto" insetBlockStart: "auto" insetInline: "auto" insetInlineEnd: "auto" insetInlineStart: "auto" isolation: "auto" justifyContent: "normal" justifyItems: "normal" justifySelf: "auto" left: "auto" letterSpacing: "normal" lightingColor: "rgb(255, 255, 255)" lineBreak: "auto" lineHeight: "normal" listStyle: "outside" listStyleImage: "none" listStylePosition: "outside" listStyleType: "disc" margin: "0px" marginBlock: "0px" marginBlockEnd: "0px" marginBlockStart: "0px" marginBottom: "0px" marginInline: "0px" marginInlineEnd: "0px" marginInlineStart: "0px" marginLeft: "0px" marginRight: "0px" marginTop: "0px" marker: "none" markerEnd: "none" markerMid: "none" markerStart: "none" mask: "none" maskClip: "border-box" maskComposite: "add" maskImage: "none" maskMode: "match-source" maskOrigin: "border-box" maskPosition: "0% 0%" maskPositionX: "0%" maskPositionY: "0%" maskRepeat: "repeat" maskSize: "auto" maskType: "luminance" maxBlockSize: "none" maxHeight: "none" maxInlineSize: "none" maxWidth: "none" minBlockSize: "0px" minHeight: "0px" minInlineSize: "0px" minWidth: "0px" mixBlendMode: "normal" objectFit: "fill" objectPosition: "50% 50%" offset: "none" offsetAnchor: "auto" offsetDistance: "0px" offsetPath: "none" offsetRotate: "auto" opacity: "1" order: "0" outline: "rgb(66, 66, 66) none 0px" outlineColor: "rgb(66, 66, 66)" outlineOffset: "0px" outlineStyle: "none" outlineWidth: "0px" overflow: "hidden" overflowAnchor: "auto" overflowBlock: "hidden" overflowClipMargin: "0px" overflowInline: "hidden" overflowWrap: "normal" overflowX: "hidden" overflowY: "hidden" overscrollBehavior: "auto" overscrollBehaviorBlock: "auto" overscrollBehaviorInline: "auto" overscrollBehaviorX: "auto" overscrollBehaviorY: "auto" padding: "0px" paddingBlock: "0px" paddingBlockEnd: "0px" paddingBlockStart: "0px" paddingBottom: "0px" paddingInline: "0px" paddingInlineEnd: "0px" paddingInlineStart: "0px" paddingLeft: "0px" paddingRight: "0px" paddingTop: "0px" pageBreakAfter: "auto" pageBreakBefore: "auto" pageBreakInside: "auto" paintOrder: "normal" placeContent: "normal" placeItems: "normal legacy" placeSelf: "auto" pointerEvents: "auto" position: "static" printColorAdjust: "economy" quotes: "auto" r: "0px" resize: "none" right: "auto" rotate: "none" rowGap: "normal" rubyAlign: "space-around" rubyPosition: "alternate" rx: "auto" ry: "auto" scale: "none" scrollBehavior: "auto" scrollMargin: "0px" scrollMarginBlock: "0px" scrollMarginBlockEnd: "0px" scrollMarginBlockStart: "0px" scrollMarginBottom: "0px" scrollMarginInline: "0px" scrollMarginInlineEnd: "0px" scrollMarginInlineStart: "0px" scrollMarginLeft: "0px" scrollMarginRight: "0px" scrollMarginTop: "0px" scrollPadding: "auto" scrollPaddingBlock: "auto" scrollPaddingBlockEnd: "auto" scrollPaddingBlockStart: "auto" scrollPaddingBottom: "auto" scrollPaddingInline: "auto" scrollPaddingInlineEnd: "auto" scrollPaddingInlineStart: "auto" scrollPaddingLeft: "auto" scrollPaddingRight: "auto" scrollPaddingTop: "auto" scrollSnapAlign: "none" scrollSnapType: "none" scrollbarColor: "auto" scrollbarGutter: "auto" scrollbarWidth: "auto" shapeImageThreshold: "0" shapeMargin: "0px" shapeOutside: "none" shapeRendering: "auto" stopColor: "rgb(0, 0, 0)" stopOpacity: "1" strokeDasharray: "none" strokeDashoffset: "0px" strokeMiterlimit: "4" strokeOpacity: "1" tabSize: "8" tableLayout: "auto" textAlign: "left" textAlignLast: "auto" textCombineUpright: "none" textDecoration: "rgb(66, 66, 66)" textDecorationColor: "rgb(66, 66, 66)" textDecorationLine: "none" textDecorationSkipInk: "auto" textDecorationStyle: "solid" textDecorationThickness: "auto" textEmphasis: "none rgb(66, 66, 66)" textEmphasisColor: "rgb(66, 66, 66)" textEmphasisPosition: "over right" textEmphasisStyle: "none" textIndent: "0px" textJustify: "auto" textOrientation: "mixed" textOverflow: "clip" textRendering: "auto" textShadow: "none" textTransform: "none" textUnderlineOffset: "auto" textUnderlinePosition: "auto" top: "auto" touchAction: "auto" transformBox: "border-box" transformOrigin: "502px 267.5px" transformStyle: "flat" translate: "none" unicodeBidi: "normal" userSelect: "auto" vectorEffect: "none" verticalAlign: "baseline" visibility: "visible" webkitAlignContent: "normal" webkitAlignItems: "normal" webkitAlignSelf: "auto" webkitAnimation: "0s ease 0s 1 normal none running none" webkitAnimationDelay: "0s" webkitAnimationDirection: "normal" webkitAnimationDuration: "0s" webkitAnimationFillMode: "none" webkitAnimationIterationCount: "1" webkitAnimationName: "none" webkitAnimationPlayState: "running" webkitAnimationTimingFunction: "ease" webkitAppearance: "none" webkitBackfaceVisibility: "visible" webkitBackgroundClip: "border-box" webkitBackgroundOrigin: "padding-box" webkitBackgroundSize: "auto" webkitBorderBottomLeftRadius: "0px" webkitBorderBottomRightRadius: "0px" webkitBorderImage: "none 100% / 1 / 0 stretch" webkitBorderRadius: "0px" webkitBorderTopLeftRadius: "0px" webkitBorderTopRightRadius: "0px" webkitBoxAlign: "stretch" webkitBoxDirection: "normal" webkitBoxFlex: "0" webkitBoxOrdinalGroup: "1" webkitBoxOrient: "horizontal" webkitBoxPack: "start" webkitBoxShadow: "none" webkitBoxSizing: "border-box" webkitFilter: "none" webkitFlex: "0 1 auto" webkitFlexBasis: "auto" webkitFlexDirection: "row" webkitFlexFlow: "row nowrap" webkitFlexGrow: "0" webkitFlexShrink: "1" webkitFlexWrap: "nowrap" webkitJustifyContent: "normal" webkitLineClamp: "none" webkitMask: "none" webkitMaskClip: "border-box" webkitMaskComposite: "add" webkitMaskImage: "none" webkitMaskOrigin: "border-box" webkitMaskPosition: "0% 0%" webkitMaskPositionX: "0%" webkitMaskPositionY: "0%" webkitMaskRepeat: "repeat" webkitMaskSize: "auto" webkitOrder: "0" webkitPerspective: "none" webkitPerspectiveOrigin: "502px 267.5px" webkitTextFillColor: "rgb(66, 66, 66)" webkitTextSizeAdjust: "auto" webkitTextStroke: "0px rgb(66, 66, 66)" webkitTextStrokeColor: "rgb(66, 66, 66)" webkitTextStrokeWidth: "0px" webkitTransform: "none" webkitTransformOrigin: "502px 267.5px" webkitTransformStyle: "flat" webkitTransition: "all 0s ease 0s" webkitTransitionDelay: "0s" webkitTransitionDuration: "0s" webkitTransitionProperty: "all" webkitTransitionTimingFunction: "ease" webkitUserSelect: "auto" whiteSpace: "normal" willChange: "auto" wordBreak: "normal" wordSpacing: "0px" wordWrap: "normal" writingMode: "horizontal-tb" zIndex: "auto" }

When looking at this object it becomes clear that for each of the CSS Custom Properties (variables) a numbered entry is added to the list.

When this list is passed to the extend method along with the CSS2properties object the code breaks. Presumably because the numbered keys from the filteredStyles object are not present in the CSS2properties object.

This used to work in V10.0, but is broken since V10.1. Incidentaly exports use to not work properly in Safari on iOS devices, which started working from V10.1 and up, so this might be a regression bug introduced by the fix for Safari exports.

Product version

Highcharts / Highstock >10.1

Affected browser(s)

FireFox

[svensigmond]

Could potentially be related to this change: 95675ad

[raf18seb]

Hi @svensigmond, thank you for reporting the issue.

Can you confirm that the error occurs in this Styled Mode demo? https://jsfiddle.net/BlackLabel/yj6sb9f0/

I suspect this also might be caused by this change: https://github.com/highcharts/highcharts/pull/16902/files
but I'm not able to test it because it's working fine for me on Windows 10 in Firefox while exporting a chart from the above demo.

[svensigmond]

Hello @raf18seb, the error does not occur in the jsfiddle you linked in (using Firefox on windows 11).

My feeling the reason that it does function in the fiddle is because the demo does not use css custom properties. If you look at the top of the massive object in my initial report you can tell that all the odd object entries are in CSS variable notation. --foo.

I will try to replicate a broken example since I will not be able to show the actual code base in which the error occurs.

[svensigmond]

@raf18seb I am unable to reproduce the bug when directly loading the scripts from your CDN, so I created a small repo which is similar to our client repo to demonstrate the bug.

The repo can be found here: https://github.com/svensigmond/highcharts-export-example

Could you please check out this project and follow the steps in the readme.md to verify the bug?

An interesting tidbit is that in this repo, the export works when using the minified import of highcharts but not when using the non-minified version, In our client repo the bug shows up regardless of the version used.

Feel free to contact me if you need more info

[raf18seb]

Hi @svensigmond, thanks for providing more info.

I was able to reproduce the issue. However, exporting fails with CSS variables in your project in Vue, but works fine in pure JS and CSS in this jsFiddle, see: https://jsfiddle.net/BlackLabel/cdn8z31x/

@import "https://code.highcharts.com/css/highcharts.css";

:root {
  --main-color: red;
}

.highcharts-color-0 {
  fill: var(--main-color);
}

Before I forward your issue to our Vue developer, I have a question (might be a trivial one, but I'm not familiar with Vue): are you using our official Vue wrapper? https://github.com/highcharts/highcharts-vue
If not, then please try to reproduce and send us a package with the same error with highcharts-vue. Thanks in advance

[svensigmond]

Hi @raf18seb I do not use the official vue-wrapper, but I have run into the exact same problem in a Svelte project. This leads me to believe this is not necessarily related to vue itself.

The main difference with the repo I sent and your latest fiddle example is that in the fiddle the scripts are directly loaded from the cdn. In my repo (and also our client vue and svelte repos) the scripts are imported from the npm package. Afterwards they are transpiled by tools like rollup or webpack to generate 1 js bundle. This might be something to look into.

In the meantime I will try and update my repo so it uses the highcharts-vue wrapper to see if the problem persists.

Edit:
I just noticed that the fonts of the axis-labels and legend labels are styled incorrectly, even in the JSfiddle that you supplied. This might be another indication that this problem is not just Vue/Svelte or bundler related, but related to how the FireFox styles are applied.

[raf18seb]

Hi,

Yes, the fonts are not working correctly. Created a ticket here: #17557

But the --___ CSS variables are still not confirmed, I'm not sure about them. I'm adding an undecided status until we get more info and confirm.

[agardiol]

Hi,
I ran into the exact same issue in my angular project using the official highcharts wrapper.
Here are my informations:

Expected behaviour

Offline exporting works without error on firefox.

Actual behaviour

When using export module with chart.styledMode enabled on Firefox, an exceptions occurs in highcharts.js:

ERROR TypeError: CSS2Properties doesn't have an indexed property setter for '349'
    c highcharts.js:14
    g highcharts.js:14
    a exporting.js:40
    ba exporting.js:41
    W exporting.js:34
    Y exporting.js:38
    Z exporting.js:38
    u offline-exporting.js:19
    f offline-exporting.js:17
    onclick offline-exporting.js:13
    onclick exporting.js:32
    Angular 17
    c highcharts.js:14
    createElement highcharts.js:21
    T exporting.js:31
    T exporting.js:31
    J exporting.js:26
    button highcharts.js:137
    Angular 15
    addEvent highcharts.js:20
    on highcharts.js:89
    button highcharts.js:137
    n exporting.js:26
    ia exporting.js:43
    y highcharts.js:16
    ia exporting.js:43
    H exporting.js:29
    onload highcharts.js:400
    onload highcharts.js:400
    firstRender highcharts.js:400
    init highcharts.js:369
    z highcharts.js:18
    init highcharts.js:367
    getArgs highcharts.js:367
    a highcharts.js:367
    chart highcharts.js:367
    Angular 5
core.mjs:6494:12

When disabling styledMode, the exception is not raised.
The error does not call exporting.error() event.

Live demo with steps to reproduce

I tried to reproduce the bug on StackBlitz without success.

Product version

Highcharts 10.1.0 wrapper by highcharts-angular v3.0.0

Affected browser(s)

Firefox v103.0.1 (64 bits) on Windows 10 Professional 21H2
It works fine on Chrome.

[svensigmond]

hi @raf18seb is there any update on this issue? Our client is quite eagerly awaiting updates but I don't know what to tell them.