Visual front-end bug fixing
Fix layout, rendering and interaction bugs that are only visible in the browser.
20 project-authored proposals · taxonomy v1.1 · 0 new benchmark runs. Verifiers and partial-credit rules below are designs, not executed results.
- Typical applications
- Chrome DevTools · browser
- Class GUI-need label
G2· GUI-essential
Task proposals · 20
Expand to inspect the complete original wording and proposed checks. Original proposal text remains English in both interfaces.
R02.04.01.03-T01 Fix a chart legend that overlaps the plot when labels are long
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Vite · vitest
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
HY· Hybrid- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Node
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentnav· Pan/zoom/scrollcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
60% containment across cases; 20% rotated maps; 20% regressions
R02.04.01.03-T03 Fix JSX attribute mis-coloring in a syntax highlighter
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Node
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
HY· Hybrid- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Hugo/Vite
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOS- Applications
- Safari · Web Inspector · Chrome
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
50% Safari fixed; 30% cross-browser parity; 20% aspect ratios
R02.04.01.03-T06 Fix insufficient contrast of buttons in dark mode
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Storybook · Chrome
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmenthover· Hover & contextcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 2 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome DevTools · React
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentnav· Pan/zoom/scrollcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Vite
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
HY· Hybrid- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Node
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · React
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
drag· Drag & dropvis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
50% drop index; 30% auto-scroll; 20% indicator + keyboard
R02.04.01.03-T11 Eliminate layout shift and janky animation on a product page
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome DevTools · Lighthouse
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
50% CLS target; 30% animation compositor-only; 20% design unchanged
R02.04.01.03-T12 Fix ellipsis truncation that fails inside flex table cells
Original instruction
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`.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · React
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmenthover· Hover & contextcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Node
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
vis· Visual judgmentgeom· Precise geometrycode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 5 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
win· Windows- Applications
- Edge · Chrome · DevTools
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
HY· Hybrid- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
50% Windows alignment; 25% line heights; 25% macOS unchanged
R02.04.01.03-T15 Stop scroll position jumping in an infinite feed
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Firefox · Safari
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
nav· Pan/zoom/scrollvis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
50% anchoring in all engines; 25% image reservation; 25% loading preserved
R02.04.01.03-T16 Fix a tooltip that flickers when hovered
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Storybook · Chrome
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
hover· Hover & contextvis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windowslin· Linux- Applications
- Chrome · Print preview
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
vis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
lin· Linux- Applications
- vitest · Node
- Interfaces
term· Terminal- GUI need · task setting
CL· CLI-sufficient- GUI need · ordinary access
CL· CLI-sufficient- Interaction primitives
code· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 3 / 5
Proposed verifier
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).
Proposed partial credit
50% no overlap; 30% gold pixel diff; 20% regressions
R02.04.01.03-T19 Fix the 100vh layout bug on iOS Safari
Original instruction
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.
- Platforms
ios· iOS/iPadOSmac· macOS- Applications
- iOS Simulator · Safari · Web Inspector
- Interfaces
mob· Mobile touchterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
G2· GUI-essential- Interaction primitives
vis· Visual judgmenttouch· Touch gesturescode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 4 / 5
Proposed verifier
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.
Proposed partial credit
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
Original instruction
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.
- Platforms
mac· macOSwin· Windows- Applications
- Chrome · Safari · OS IME
- Interfaces
brow· Browserterm· Terminal- GUI need · task setting
G2· GUI-essential- GUI need · ordinary access
HY· Hybrid- Interaction primitives
type· Text & formsvis· Visual judgmentcode· Code & commands- Work product
WP06· Code/engineering- Conditions
- None declared
- Proposed difficulty
- 5 / 5
Proposed verifier
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.
Proposed partial credit
40% caret stability; 35% IME correctness; 25% undo coherence
Mapped research references
Existing benchmark-to-class links from the research catalog. They are not record-level annotations, executions or product endorsements.