[Bug]: AreaChart renders SVG rect with negative width and height on initial render
维护者通常 1 天内回复
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 76/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, typescript
调研方向
从 @fluentui/react-charting 包中的 AreaChart 悬停矩形入手，并使用 StackBlitz 复现来观察它在首次渲染时的尺寸。检查组件中现有的图表渲染测试，并添加对无效初始尺寸的覆盖。当透明的 rect 在测量前不再产生负宽度或负高度时，即表示完成。
由索引模型根据 Issue 内容生成。
描述
Charting Control
AreaChart
Package version
@fluentui/react-charting 5.25.6
React version
React 19.2.4
Environment
System:
OS: Windows 11 Enterprise 10.0.26300
CPU: Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Node: v24.11.0
Browsers:
Edge: 155.0.4283.45
npmPackages:
@fluentui/react-charting: 5.25.6
react: 19.2.4
react-dom: 19.2.4
@types/react: 18.3.28
@types/react-dom: 18.3.7
Current Behavior
The browser logs errors about negative SVG rectangle dimensions. The chart displays correctly after measurement, so the visible output is unaffected.
Expected Behavior
Clamp both values to zero, or skip rendering the hover rectangle until the chart has valid dimensions.
Reproduction
https://stackblitz.com/edit/vitejs-vite-gjyhrnvu
Steps to reproduce
Render an AreaChart inside a container with a fixed width and margins.
Open the browser console on first render.
Observe errors about negative width and height on the transparent .
Are you reporting an Accessibility issue?
None
Suggested severity
High - No workaround
Products/sites affected
Content Studio
Are you willing to submit a PR to fix?
yes
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.
- 主要语言
- TypeScript
- 星标
- 20.3k
- 派生
- 2.9k
- 平均合并
- 2 天 10 小时
- 30 天内合并 PR
- 72
环境准备
在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 没有贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
microsoft/fluentui 的其他 Issue
-
[Bug]: Button shims in react-migration-v8-v9 always render the ms-Button--primary class可能已有人在做 @jakesalvesen 今天认领。 未关闭Fluent UI react-components (v9) Needs: Triage :mag: Type: Bug :bug:
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
[Bug]: Vertical Slider still logs the deprecated 'slider-vertical' warning in Chromium 132+可能已有人在做 @jakesalvesen 于 3 天前认领。 未关闭Fluent UI react-components (v9) Needs: Triage :mag: Type: Bug :bug:
难度 2/5 1-3 小时 新手友好度 74/100
microsoft/fluentui#36945 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
@fluentui/web-components: fluent-menu-list loses its arrow keys after it is moved in the DOM (Firefox, Safari)可能已有人在做 @asxxb 于 11 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 84/100
维护者通常 1 天内回复
查看 microsoft/fluentui 的全部 Issue
相似的 Issue
-
bug hacktoberfest help wanted
难度 2/5 1-3 小时 新手友好度 82/100
libredb/libredb-studio#1941 ·
维护者通常 1 天内回复
-
chore other
难度 2/5 1-3 小时 新手友好度 78/100
alastair-smith/card-games#308 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 86/100
paperclipai/paperclip#17379 ·
维护者通常 1 天内回复
-
[good first issue, hacktoberfest] 🏯 Hacktoberfest Task - Add new Anime Quote 626 (good-first-issue)未关闭community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
难度 1/5 1 小时以内 新手友好度 76/100
lingdojo/kana-dojo#33040 · 1 条评论 · 5 个 reaction ·
维护者通常 1 天内回复
-
bug mobile ui
难度 2/5 1-3 小时 新手友好度 88/100
维护者通常 1 天内回复