Image exports are not working in FireFox when using styled mode from Highcharts v10.1 and up #17538
Comments
|
Could potentially be related to this change: 95675ad |
|
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 |
|
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. 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. |
|
@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 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 |
|
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 |
|
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: |
|
Hi, Yes, the fonts are not working correctly. Created a ticket here: #17557 But the |
|
Hi, Expected behaviourOffline exporting works without error on firefox. Actual behaviourWhen using export module with chart.styledMode enabled on Firefox, an exceptions occurs in highcharts.js: When disabling styledMode, the exception is not raised. Live demo with steps to reproduceI tried to reproduce the bug on StackBlitz without success. Product versionHighcharts 10.1.0 wrapper by highcharts-angular v3.0.0 Affected browser(s)Firefox v103.0.1 (64 bits) on Windows 10 Professional 21H2 |
|
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. |
|
Thanks for your patience @svensigmond ! I was able to reproduce it on jsFiddle and I think I have a fix. Can you please test it in your environment? See the change in the referenced draft PR, or load Highcharts directly from https://github.highcharts.com/14fcd18/highcharts.js and https://github.highcharts.com/14fcd18/modules/exporting.js . |
|
Hi @TorsteinHonsi, I directly loaded the scripts you supplied in my application and even though exporting works, the font issue on firefox as reported in this ticket still persists: #17557 It is hard for me to say if the changes are effective for the following 2 reasons:
|
Perhaps you can try to apply the fix directly to |
|
Thanks for the suggestion, what I did was copying the code from this file: https://github.highcharts.com/14fcd18/modules/exporting.js into Having done so, I am now able to export image versions of the charts without the workaround I described before. The issue with the fonts still persists (#17557) but this change does seem to fix the bug reported in this ticket! |
|
Awesome, thanks for helping with the testing! I'll investigate the font issue, I noticed that also when testing this issue. |
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
extendmethod along with theCSS2propertiesobject 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
The text was updated successfully, but these errors were encountered: