Skip to content

IgrCategoryChart: unvalidated transitionDuration setter turns inherited --transition-duration into NaN, breaking series rendering #196

Description

@IG-Mori

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

  1. Place an IgrCategoryChart in a container and set isTransitionInEnabled="true".
  2. Declare --transition-duration: 350ms; on that container (or simply use IgrDialog as the container, which declares it internally).
  3. Display the container so the entrance animation starts.
  4. 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:

  1. Chart inside IgrDialog - reproduces
  2. Standalone chart - does not reproduce
  3. Chart inside a native <dialog> element - reproduces only after --transition-duration: 350ms is added

Related Slingshot

igr-dialog-chart-repro (1).zip

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions