Skip to content

fix: add clip-path prevents the clickable area of ​​the last link from expanding below the table #1597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 4 commits into from
Feb 23, 2026
Merged

fix: add clip-path prevents the clickable area of ​​the last link from expanding below the table #1597

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8149876
fix: table row click bug in safari
RYGRIT Feb 22, 2026
1186a3b
Merge branch 'main' into fix/table-row-click
RYGRIT Feb 22, 2026
156f24d
Merge branch 'main' into fix/table-row-click
RYGRIT Feb 23, 2026
394f960
fix: add clip-path and remove redundant transform class
RYGRIT Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/Package/TableRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const allMaintainersText = computed(() => {

<template>
<tr
class="group relative transform scale-100 border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
class="group relative scale-100 [clip-path:inset(0)] border-b border-border hover:bg-bg-muted transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-inset focus-visible:outline-none focus:bg-bg-muted"
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Safari clip-path inset(0) tr border paint artifacts workaround transform

💡 Result:

Safari/WebKit can show 1px “border/edge” paint artifacts when an element is clipped (e.g., clip-path: inset(0)) and/or promoted to a composited layer by transform (or translateZ(0)). Common workarounds:

1) Don’t put the border on the clipped element (use a wrapper)

<div class="frame"><div class="clip">…</div></div>
.frame { border: 1px solid rgba(0,0,0,.2); border-radius: 12px; }
.clip  { border-radius: 12px; clip-path: inset(0); -webkit-clip-path: inset(0); }

This avoids Safari having to anti-alias the border and the clip edge in the same layer (a frequent source of seams).

2) Force WebKit to clip against the box explicitly (border-box / content-box)

.clip { clip-path: border-box; } /* or: content-box */

border-box/content-box are valid clip-path geometry-box values. [4]
This has been cited as a workaround for WebKit clipping issues when transforms/compositing are involved. [1][2]

3) Add a “transparent outline” (often kills the 1px seam during transforms)

.clip { outline: 1px solid transparent; }

This is a known Safari artifact workaround for flickering/jagged 1px lines on transformed/scaled elements. [3]

If you share a minimal HTML/CSS repro (especially whether the border is on the same element as the clip-path, and which transforms are applied), I can suggest the smallest combination that fixes it for your case.

Sources: WebKit bug discussion/workaround (clip-path: border-box) [1], Safari clipping workaround using clip-path: content-box [2], Safari 1px line artifact workaround (outline: 1px solid transparent) [3], MDN clip-path geometry-box values [4].

🌐 Web query:

mtsknn.fi relative tr Safari clip-path inset(0) workaround

💡 Result:

Safari ignores position: relative on <tr>, so absolutely-positioned overlays (e.g., an <a>::after { inset: 0; position: absolute; } “make whole row clickable” trick) can expand to the viewport/table instead of the row.

Workaround (from mtsknn.fi): use a transform to create the containing block, then clip the row. Also move focus styling to the row because clip-path can clip outlines. [1]

tr{
  transform: translate(0); /* workaround for Safari <tr> positioning */
  clip-path: inset(0);     /* clips the absolutely-positioned overlay to the row */
}

tr:focus-within{
  outline: 2px solid hotpink;
  outline-offset: -2px;    /* negative so it isn’t clipped */
}

a:focus{ outline: 0; }     /* focus ring is on the row */
a::after{
  content:"";
  position:absolute;
  inset:0;
}

Note: clip-path: inset(0) may cause Safari paint quirks (e.g., borders sometimes disappearing). [1]

Sources: [1]

Verify Safari border rendering with clip-path: inset(0) on <tr>; consider translate(0) as a more conservative transform.

The clip-path: inset(0) on <tr> is a documented Safari workaround (per mtsknn.fi) for creating a containing block when position: relative is ignored. The established pattern pairs it with a transform, and the code does apply scale-100 (which generates transform: scaleX(1) scaleY(1)). However, the mtsknn.fi source specifically recommends transform: translate(0), which is more minimal. Both create a stacking context, but if paint artefacts (such as borders disappearing) appear in Safari, consider replacing scale-100 with translate(0) as the tested alternative. A quick visual smoke-test in Safari would confirm whether the border-b border-border on table rows renders correctly.

tabindex="0"
:data-result-index="index"
>
Expand Down
Loading