前端视觉缺陷修复
Visual front-end bug fixing
Fix layout, rendering and interaction bugs that are only visible in the browser.
20 条本项目编写的提案 · 分类 v1.1 · 新增基准运行 0 次。下方验证方式与部分得分规则是设计,不是执行结果。
- 典型应用
- Chrome DevTools · browser
- 小类 GUI 需求标签
G2· GUI 必要
任务提案 · 20
展开查看完整原文与建议检查方式;两种界面均保留提案英文原文。
R02.04.01.03-T01 Fix a chart legend that overlaps the plot when labels are long
原始指令
In the charting library `/work/plotkit` (TypeScript, SVG renderer), the issue screenshot `issue_412.png` shows the right-side legend overlapping bars when series names exceed ~20 characters. Reproduce in the demo page in a browser, fix the layout so the plot area shrinks to fit the legend (wrapping names over 2 lines max), and verify visually.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Vite · vitest
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
HY· 混合- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Hidden visual regression tests (Playwright screenshots of 8 legend configurations) pass pixel-diff < 0.5% vs gold; bbox check: legend and plot rects never intersect; existing visual suite unchanged. Image-blind fixes typically wrap wrongly and fail the gold diff. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
50% no overlap across configs; 30% gold pixel diff; 20% no regressions
R02.04.01.03-T02 Keep a map marker popup on screen at high zoom
原始指令
In `/work/leafmap` (map library), popups for markers near the viewport edge render partially off-screen at zoom 18 (screenshot in the issue). Reproduce in the debug page, fix auto-pan/positioning so popups stay fully visible with a 10 px margin, without breaking popups in rotated maps.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Node
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断nav· 平移 / 缩放 / 滚动code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Hidden Playwright tests open popups at 40 edge positions × zoom 16-19 (incl. rotated bearing): popup DOM rect fully inside viewport minus 10 px; screenshot diff vs gold < 1%; existing tests green. The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
60% containment across cases; 20% rotated maps; 20% regressions
R02.04.01.03-T03 Fix JSX attribute mis-coloring in a syntax highlighter
原始指令
In `/work/hilite` (syntax highlighter), JSX attributes after a template literal are colored as plain text (see `issue.png`). Reproduce in the playground page, fix the grammar/tokenizer so attributes get the `attr-name` scope in all reported cases, and verify the rendered colors.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Node
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
HY· 混合- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Hidden token-scope tests on 30 snippets; rendered-screenshot comparison of 10 snippets vs gold (pixel diff < 0.3%); no change in token output for 500 non-JSX corpus files. Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
40% scopes correct; 40% rendered colors match; 20% no regressions
R02.04.01.03-T04 Stop a sticky header from covering in-page anchor targets
原始指令
On the docs site `/work/docs-site`, clicking table-of-contents links scrolls headings under the 72 px sticky header (taller on mobile when the banner shows). Fix it so every anchor target lands fully visible below the header at desktop and mobile widths, including when the header height changes.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Hugo/Vite
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 2 / 5
建议验证方式
Playwright clicks 25 TOC links at 1280 and 390 px (with and without banner): heading top >= header bottom and within 24 px; screenshot of 3 cases matches gold; no JS scroll hacks that break back/forward (history test). Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
60% anchors visible; 20% dynamic header case; 20% history behavior
R02.04.01.03-T05 Fix a Safari-only layout break in a flexbox card grid
原始指令
The product grid in `/work/shop-web` looks correct in Chrome but in Safari on macOS cards collapse to minimum height and images stretch (issue screenshot from Safari 17). Reproduce in Safari on the Mac VM, fix the CSS so Safari, Chrome and Firefox render the grid identically within tolerance.
- 平台
mac· macOS- 应用
- Safari · Web Inspector · Chrome
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
G2· GUI 必要- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Grader screenshots in Safari (WebKit on macOS), Chrome and Firefox at 3 widths: cross-browser pixel diff < 1%; card heights equal within 1 px per row; image aspect ratios preserved (±1%). Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
50% Safari fixed; 30% cross-browser parity; 20% aspect ratios
R02.04.01.03-T06 Fix insufficient contrast of buttons in dark mode
原始指令
In `/work/design-system` (Storybook), secondary and ghost buttons fail contrast in dark mode (screenshot attached). Fix the dark theme tokens so all button variants in all states (default, hover, focus, disabled) meet WCAG AA (4.5:1 text, 3:1 focus ring), without changing light mode.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Storybook · Chrome
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断hover· 悬停与上下文code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 2 / 5
建议验证方式
Grader renders Storybook stories in dark mode, measures contrast from pixels for 24 variant/state combos: all pass AA; light-mode screenshots identical to baseline; disabled exempt per WCAG but must stay distinguishable (ΔE >= 10). The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
60% contrast pass rate; 25% light mode unchanged; 15% disabled distinguishable
R02.04.01.03-T07 Fix a modal rendering beneath content due to a transformed ancestor
原始指令
In `/work/crm-ui`, the 'Edit contact' modal appears behind the sticky toolbar and is clipped inside the card on some pages, because of stacking contexts created by `transform` and `overflow` on ancestors. Fix it so the modal always renders above everything and is never clipped, on all 5 pages that use it.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome DevTools · React
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断nav· 平移 / 缩放 / 滚动code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Playwright opens the modal on 5 pages: elementFromPoint at 9 sample points inside the modal returns modal descendants; screenshot diff vs gold < 1%; focus trap and Esc close still work. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
60% modal on top unclipped (equal share per page); 20% gold diff; 20% behavior preserved
R02.04.01.03-T08 Fix RTL layout bugs for Arabic and Hebrew locales
原始指令
In `/work/travel-web`, switching to Arabic or Hebrew produces mirrored icons that should not mirror (logos, media controls), un-mirrored directional arrows that should, misaligned form labels and a carousel that slides the wrong way. Fix the CSS/JS using logical properties and dir-aware logic.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Vite
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
HY· 混合- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Grader renders 8 pages in ar and he: screenshot diff vs gold < 1.5%; icon transform checks for 12 icons (mirror or not per spec); carousel next moves visually leftward in RTL; LTR screenshots unchanged. The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
40% gold diffs; 25% icon mirroring; 20% carousel; 15% LTR unchanged
R02.04.01.03-T09 Make a canvas chart render crisply on HiDPI displays
原始指令
In `/work/sparkline` (canvas-based), charts look blurry on Retina/HiDPI screens and text is fuzzy; resizing the window makes it worse. Fix devicePixelRatio handling, including when the window moves between displays with different ratios and on browser zoom.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Node
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Grader screenshots at DPR 1, 2, 3 and browser zoom 150%: edge sharpness (Laplacian variance) within 5% of gold; canvas backing size = CSS size × DPR; DPR change event re-renders (emulated). Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
50% sharpness across DPRs; 25% backing size; 25% DPR change handling
R02.04.01.03-T10 Fix a drag-to-reorder list that drops items in the wrong position
原始指令
In `/work/playlist-ui`, dragging a track onto the lower half of another track inserts it above instead of below, and auto-scroll during drag skips items in long lists. Reproduce by performing the drags in the browser, then fix the drop-index calculation and auto-scroll.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · React
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
drag· 拖放vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Hidden Playwright tests perform 40 real pointer drags (upper/lower halves, edges, auto-scroll in a 500-item list): resulting order equals expected; drop indicator position matches final index; keyboard reorder still works. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
50% drop index; 30% auto-scroll; 20% indicator + keyboard
R02.04.01.03-T11 Eliminate layout shift and janky animation on a product page
原始指令
The product page in `/work/shop-web` has CLS 0.31 (late-loading images, a font swap, an injected promo bar) and the image gallery animation drops frames because it animates `left`. Fix CLS to < 0.05 and make the gallery animation compositor-only, keeping the visual design.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome DevTools · Lighthouse
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Grader web-vitals run (5 loads, throttled): CLS < 0.05; gallery transition uses transform/opacity only (Performance trace shows no layout during animation); final screenshot SSIM >= 0.98 vs baseline design. Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
50% CLS target; 30% animation compositor-only; 20% design unchanged
R02.04.01.03-T12 Fix ellipsis truncation that fails inside flex table cells
原始指令
In `/work/admin-table`, long email addresses in the Users table push columns off-screen instead of truncating with an ellipsis, because the cells contain flex containers. Fix it so text truncates with ellipsis, the full value shows in a tooltip on hover, and column widths follow the spec in `columns.md`.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · React
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断hover· 悬停与上下文code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Playwright at 1280/1024 px: table scrollWidth <= clientWidth; truncated cells show '…' (screenshot OCR/pixel check) and tooltip text equals full value on hover; column widths ±2 px of spec. The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
40% no overflow; 25% ellipsis visible; 20% tooltip; 15% widths
R02.04.01.03-T13 Fix misrouted edges in a diagramming library's orthogonal router
原始指令
In `/work/diagramjs` (SWE-bench-M style issue with screenshots), orthogonal edges route through nodes when nodes are rotated or when ports are on the same side. Reproduce on the demo canvas, fix the router so edges avoid node bounding boxes with 8 px clearance and minimal bends.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Node
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
vis· 视觉判断geom· 精确几何code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 5 / 5
建议验证方式
Hidden FAIL_TO_PASS visual tests (12 diagrams) pass pixel diff < 1% vs gold; geometry check: no edge segment intersects inflated node boxes; bend count <= gold+1; PASS_TO_PASS visual suite green. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
40% no intersections; 35% gold visuals; 15% bend counts; 10% regressions
R02.04.01.03-T14 Fix CJK font fallback misalignment that appears only on Windows
原始指令
On Windows, mixed English/Chinese/Japanese labels in `/work/intl-dashboard` render with vertical misalignment and inconsistent line heights because of font fallback (Segoe UI vs Microsoft YaHei vs Yu Gothic). Reproduce on the Windows VM in Edge and Chrome, then fix the font stack and line-height rules.
- 平台
win· Windows- 应用
- Edge · Chrome · DevTools
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
HY· 混合- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Grader screenshots on Windows (Edge, Chrome) of 10 components: baseline offset between Latin and CJK glyphs <= 1 px (measured from glyph bounding boxes); line boxes equal height; macOS rendering unchanged within 1% diff. The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
50% Windows alignment; 25% line heights; 25% macOS unchanged
R02.04.01.03-T15 Stop scroll position jumping in an infinite feed
原始指令
In `/work/feed-web`, when new items load above (live updates) or images finish loading, the scroll position jumps and users lose their place. Fix it with scroll anchoring and reserved image dimensions so the item under the viewport top stays put within 2 px, in Chrome, Firefox and Safari.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Firefox · Safari
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
nav· 平移 / 缩放 / 滚动vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Playwright in 3 engines: scroll to item 120, inject 20 items above and late image loads; the anchor item's top offset changes <= 2 px; no visible blank gaps (screenshot); infinite loading still triggers. Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
50% anchoring in all engines; 25% image reservation; 25% loading preserved
R02.04.01.03-T16 Fix a tooltip that flickers when hovered
原始指令
Tooltips in `/work/design-system` flicker on and off when the pointer moves from the trigger onto the tooltip, and appear at the wrong side near the viewport edge. Reproduce by hovering in Storybook, then fix hover intent (delay, safe triangle/area) and flip positioning.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Storybook · Chrome
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
hover· 悬停与上下文vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Playwright pointer paths (20 scripted traces from trigger to tooltip): tooltip stays visible throughout; near-edge cases flip to the in-viewport side; keyboard focus shows tooltip; screenshot diffs vs gold < 0.5%. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
45% no flicker; 30% flip positioning; 10% keyboard; 15% gold visuals
R02.04.01.03-T17 Fix a print stylesheet that cuts tables and prints navigation
原始指令
Printing invoices from `/work/billing-web` prints the nav and sidebar, splits table rows across pages, and loses the company logo. Fix the print CSS so the invoice prints on A4 with repeated table headers, no split rows, logo shown, and no app chrome.
- 平台
mac· macOSwin· Windowslin· Linux- 应用
- Chrome · Print preview
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
G2· GUI 必要- 交互原语
vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Grader prints 3 invoices to PDF (A4) via headless Chrome: no nav text present; header row repeated on each page; no row split across pages (bbox check); logo image present; page count equals gold. The hidden Playwright suite and gold screenshots are withheld from the agent's container; edits to existing tests or snapshots are detected by hash and fail.
建议部分得分
25% chrome removed; 30% header repeat; 30% no split rows; 15% logo
R02.04.01.03-T18 Control pair of T01: fix the legend overlap from failing pixel tests only
原始指令
Control pair of T01. Same repository and bug, but no browser or screenshot viewing is available: only the failing visual tests' numeric diff output (pixel counts, bounding boxes printed as JSON). Fix the legend layout so the hidden visual tests pass.
- 平台
lin· Linux- 应用
- vitest · Node
- 交互表面
term· 终端- GUI 需求 · 任务设定
CL· CLI 足够- GUI 需求 · 普通权限
CL· CLI 足够- 交互原语
code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 3 / 5
建议验证方式
Same hidden visual regression tests and bbox checks as T01; agent environment has no display or image tools (compares how well text-only feedback suffices).
建议部分得分
50% no overlap; 30% gold pixel diff; 20% regressions
R02.04.01.03-T19 Fix the 100vh layout bug on iOS Safari
原始指令
On iPhone (iOS Simulator, Safari), the full-screen checkout panel in `/work/checkout-web` is taller than the visible area, hiding the 'Pay' button behind the toolbar, and jumps when the address bar collapses. Fix with dynamic viewport units and safe-area insets, verifying in the simulator in portrait and landscape.
- 平台
ios· iOS/iPadOSmac· macOS- 应用
- iOS Simulator · Safari · Web Inspector
- 交互表面
mob· 移动触控term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
G2· GUI 必要- 交互原语
vis· 视觉判断touch· 触控手势code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 4 / 5
建议验证方式
Grader screenshots on iPhone 15 and SE simulators (portrait/landscape, toolbar expanded/collapsed): Pay button fully visible above safe area; no layout jump > 2 px on toolbar collapse; desktop unchanged. Grading runs a withheld suite against rendered output; changes to the repo's own tests, snapshots or test config are detected by hash and void the task.
建议部分得分
50% button visible in all states; 30% no jump; 20% desktop unchanged
R02.04.01.03-T20 Fix caret jumps and selection loss in a rich-text editor
原始指令
In the contenteditable-based editor `/work/notepad-rt`, typing quickly after applying bold makes the caret jump to the paragraph start, and IME composition (Japanese input) duplicates characters. Reproduce in the browser (including with the OS IME), fix selection preservation and composition handling, and keep undo history coherent.
- 平台
mac· macOSwin· Windows- 应用
- Chrome · Safari · OS IME
- 交互表面
brow· 浏览器term· 终端- GUI 需求 · 任务设定
G2· GUI 必要- GUI 需求 · 普通权限
HY· 混合- 交互原语
type· 文字与表单vis· 视觉判断code· 代码与命令- 工作产物
WP06· 代码 / 工程- 条件
- 未声明
- 提案难度
- 5 / 5
建议验证方式
Hidden tests: 30 typing scripts with formatting toggles (caret offset after each keystroke equals expected); IME composition scripts via CDP Input.imeSetComposition in Chrome and WebDriver in Safari produce exact text; undo restores prior states. Hidden tests and gold images are withheld until grading and test/snapshot files are hash-checked, so editing tests or regenerating goldens is detected and fails.
建议部分得分
40% caret stability; 35% IME correctness; 25% undo coherence
已有研究映射
以下沿用研究目录中的基准与小类映射,不是逐题标注、执行记录或产品背书。