Fix inline code rendering as empty boxes over page covers (RND-12266) - #4484
Draft
zenoachtig wants to merge 1 commit into
Draft
Fix inline code rendering as empty boxes over page covers (RND-12266)#4484zenoachtig wants to merge 1 commit into
zenoachtig wants to merge 1 commit into
Conversation
On pages with a background cover, paragraphs/headings that cross the cover's bottom edge get the `text-contrast-cover` "split" treatment: transparent text fill plus a text-clipped gradient. Inline `code`/`kbd` chips paint their own background, so the cover is never behind their glyphs, yet they inherit the transparent fill without receiving a gradient of their own — leaving them as empty boxes on the published site. Restore a solid, readable fill for these chips inside split cover-aware text. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XGcATnYSXJ5aMDHjnZX1Pe
🦋 Changeset detectedLatest commit: 3b442cf The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
zenoachtig
had a problem deploying
to
2c-preview
August 11, 2026 00:22 — with 
GitHub Actions
Failure
zenoachtig
had a problem deploying
to
2v-preview
August 11, 2026 00:22 — with
GitHub Actions
Failure
Contributor
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed changes
Inline code (and keyboard
kbd) chips render as empty boxes on published pages that use a background cover (e.g. a home page). RND-12266 reports this affects all inline code (order_id,amount,Content-Type, …), only after publishing, and persists in incognito.Root cause. Cover-aware contrast text (introduced/reworked in #4477) marks page-body paragraphs and headings that overlap a background cover. An element that crosses the cover's bottom edge gets
data-over-cover="split", and thetext-contrast-coverutility then paints it withcolor: transparent+-webkit-text-fill-color: transparentand abackground-imagegradient clipped to the text viabackground-clip: text.That works for the paragraph's own text runs, but an inline
<code>/<kbd>is a nested element:color/-webkit-text-fill-color, so its glyphs are painted transparent;background-imageandbackground-clipare not inherited, so it never gets a text-clipped gradient of its own to paint the glyphs back.Because the chip also paints its own
bg-tintbackground andring, the result is a visible box with invisible text — an empty box. (The RecordCard fix in the same PR handled the analogous "paints its own background" case by opting out of cover-aware text; inline chips inside a legitimately cover-aware paragraph can't opt the whole paragraph out, so they need to reset their own fill.)Fix. Inside the
splitrule oftext-contrast-cover, restore a solid, readable fill forcode/kbddescendants using--cover-text-below(the normal below-cover text color, theme-aware). These chips paint their own background, so the cover is never behind their glyphs and they don't need the gradient. Scoped to thesplitcase only; the flatfull-cover case was already fine.Changelog
🌙 Night-shift draft — root-caused but NOT verified in a running browser. Please sanity-check before marking ready.
Generated by Claude Code