计算机使用智能体分类English
R02.04.01.03 · 任务小类

前端视觉缺陷修复

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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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 · macOS win · Windows lin · 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/iPadOS mac · 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 · macOS win · 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

已有研究映射

以下沿用研究目录中的基准与小类映射,不是逐题标注、执行记录或产品背书。

同工作流族的小类