Repository navigation
fix(check): masked or clipped-away text no longer counts as overlapping - #7364
Conversation
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
![heygengenesis[bot]](https://avatars.githubusercontent.com/in/2913576?s=60&v=4){kind=small}
There was a problem hiding this comment.
Verdict: REQUEST CHANGES · 1 blocker · 0 important · 0 nits · head a7d207da
The fix works, and fails without the fix: checks out: on main's layout-audit.browser.js the 4 masked/clipped cases fail, and at head all 7 pass. One blocker, inline: a moved mask now hides a real overlap.
Scope
Read all of layout-audit.browser.js (clip-path/mask family, plus both callers of visibleTextClientRects: overlap blocks and craft parts) and the test table. Ran the Chromium cases locally against Chromium 1237. The only change from 55d7e58 to a7d207d is a comment. CI was still running when this was posted.
| function maskRegion(node, style) { | ||
| const value = style.maskImage || style.webkitMaskImage; | ||
| if (!value || value === "none" || topLevelSplit(value, ",").length !== 1) return null; | ||
| const size = style.maskSize || style.webkitMaskSize || "auto"; |
There was a problem hiding this comment.
blocker: maskRegion checks mask-size but not mask-position or mask-origin. A moved mask is read as if it sat at 0 0, so this can now hide a real overlap that main reports. That breaks the PR's promise that a mask the code can't read keeps today's behavior.
Repro (added to the new table locally): upper + lower("mask-image:linear-gradient(transparent 62%, #000 62%);mask-repeat:no-repeat;mask-position:0 -75px"). The painted strip moves up to 150-195 px, right on top of the upper heading, but the check now reports no content_overlap (main does report it). Animating mask-position is a common way to do wipe reveals.
Fix: return null unless maskPosition resolves to the origin (0% 0% / 0px 0px) and maskOrigin is border-box. Please also add the case above to the table with overlap: true.
There was a problem hiding this comment.
Fixed at 15c92ef. maskRegion now reads a mask only when it sits at the origin (mask-position 0 0 in % or px) on the border box (mask-origin: border-box) with mask-size: auto; any other mask keeps today's verdict (the text counts as painted). Added your repro as masked by a mask moved up onto the other text (overlap: true) and a mask-origin: content-box case (overlap: true). Both fail on the previous head (2 failed, 7 passed of the painted-text table); with the fix 453 passed across layout-audit, contrast-audit, checkBrowser and layoutAudit in Chromium, 3 runs in a row. format:check, fallow and oxlint exit 0.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
What
hyperframes checkflagged text as overlapping other text when the part that touched was masked or clipped away, so it was never on screen. The overlap gate now measures each text block by what it paints.clip-path(inset,polygon,circle,ellipse, by their bounds) and single-layer gradientmask-image(linear-gradientalong an axis,radial-gradient); the mask counts as painting where its alpha is at least 0.35. Overflow clipping of ancestors was already applied and keeps working the same way.path(), an image mask, a repeated or resized mask) keeps today's behavior: the text counts as painted.docs/packages/cli.mdxsays overlap is judged on the visible text.Why
A user report: check reported ten overlaps on text sitting under a mask while the rendered frames looked fine.
Size
One function family in
layout-audit.browser.js, one table of Chromium cases, one docs paragraph.Test plan
layout-audit.chromium.test.ts: HELLO at 100-220 px, WORLD at 150-270 px, with only WORLD's top 60% able to touch HELLO. WORLD masked transparent there (own mask, a wrapper's fading mask, a radial mask) or cut byclip-path: inset(62% 0 0 0)is no overlap; the unmasked control, a mask that still paints the touching part, and an overflow-hidden wrapper keep their current verdicts.layout-audit.browser.jsthe four masked or clipped cases reportcontent_overlap(4 failed, 3 passed).layout-audit*,contrast-audit*,checkBrowser.test.ts,layoutAudit*in Chromium: 451 passed, 3 runs in a row.bun run format:checkexit 0;fallow audit --base origin/main --fail-on-issuesexit 0; oxlint exit 0.