Description
The control that needs a fix is IgrCategoryChart.
The chart reads the CSS custom property --transition-duration from the container it is mounted in and uses that value to initialize its own transitionDuration. The setter assigns the value with a unary plus and performs no type or format validation:
set transitionDuration(v) { this.i.l8 = +v; } // +"350ms" === NaN
CSS custom property values always carry a unit, so an inherited value such as 350ms is coerced to NaN. With transitionDuration set to NaN, the entrance animation state breaks and the series stops rendering as soon as a redraw is triggered by hovering.
This is not an IgrDialog issue. IgrDialog legitimately declares --transition-duration: 350ms for its backdrop fade; the chart simply picks up that value and fails to handle it. The same behavior reproduces with a native <dialog> element, or any plain container, once the declaration is added:
.dialog-box { --transition-duration: 350ms; }
Two problems should be addressed in the chart:
transitionDuration accepts any value without validation and silently ends up as NaN.
The chart consumes a generic, non-namespaced CSS variable owned by its host container, so unrelated styling affects chart animation.
Steps to reproduce
- Place an
IgrCategoryChart in a container and set isTransitionInEnabled="true".
- Declare
--transition-duration: 350ms; on that container (or simply use IgrDialog as the container, which declares it internally).
- Display the container so the entrance animation starts.
- Hover over the chart repeatedly while the animation is still running.
Result
transitionDuration is NaN because +"350ms" cannot be converted to a number. The series (line series) disappears and is not rendered again.
Expected result
The transitionDuration setter should validate its input: parse unit-bearing CSS values, or ignore invalid values and fall back to the chart's default. The series should keep rendering when the chart is hovered during the entrance animation, regardless of the CSS custom properties defined on the host container.
Additionally, consider reading a chart-specific custom property instead of the generic --transition-duration.
Workaround
Reset the variable on the chart's own container so the chart finds no inherited value and keeps its default:
.chart-box { --transition-duration: initial; }
This must be applied to the chart container, not to the dialog, because IgrDialog uses the same variable for its backdrop fade.
Attachments
Sample with three side-by-side cases:
- Chart inside
IgrDialog - reproduces
- Standalone chart - does not reproduce
- Chart inside a native
<dialog> element - reproduces only after --transition-duration: 350ms is added
Related Slingshot
igr-dialog-chart-repro (1).zip
Description
The control that needs a fix is IgrCategoryChart.
The chart reads the CSS custom property
--transition-durationfrom the container it is mounted in and uses that value to initialize its owntransitionDuration. The setter assigns the value with a unary plus and performs no type or format validation:CSS custom property values always carry a unit, so an inherited value such as
350msis coerced toNaN. WithtransitionDurationset toNaN, the entrance animation state breaks and the series stops rendering as soon as a redraw is triggered by hovering.This is not an
IgrDialogissue.IgrDialoglegitimately declares--transition-duration: 350msfor its backdrop fade; the chart simply picks up that value and fails to handle it. The same behavior reproduces with a native<dialog>element, or any plain container, once the declaration is added:Two problems should be addressed in the chart:
transitionDurationaccepts any value without validation and silently ends up asNaN.The chart consumes a generic, non-namespaced CSS variable owned by its host container, so unrelated styling affects chart animation.
Steps to reproduce
IgrCategoryChartin a container and setisTransitionInEnabled="true".--transition-duration: 350ms;on that container (or simply useIgrDialogas the container, which declares it internally).Result
transitionDurationisNaNbecause+"350ms"cannot be converted to a number. The series (line series) disappears and is not rendered again.Expected result
The
transitionDurationsetter should validate its input: parse unit-bearing CSS values, or ignore invalid values and fall back to the chart's default. The series should keep rendering when the chart is hovered during the entrance animation, regardless of the CSS custom properties defined on the host container.Additionally, consider reading a chart-specific custom property instead of the generic
--transition-duration.Workaround
Reset the variable on the chart's own container so the chart finds no inherited value and keeps its default:
This must be applied to the chart container, not to the dialog, because
IgrDialoguses the same variable for its backdrop fade.Attachments
Sample with three side-by-side cases:
IgrDialog- reproduces<dialog>element - reproduces only after--transition-duration: 350msis addedRelated Slingshot
igr-dialog-chart-repro (1).zip