Skip to content

fix(publisher): draw media backgrounds at the original's size under background-size auto - #563

Open
tommy230 wants to merge 1 commit into
CoreBunch:mainfrom
tommy230:fix/background-image-set-intrinsic-width
Open

tommy230 wants to merge 1 commit into
CoreBunch:mainfrom
tommy230:fix/background-image-set-intrinsic-width

Conversation

@tommy230

Copy link
Copy Markdown
Contributor

Summary

A media-library image used as a background with background-size: auto (or no size set) publishes at about 1024px wide, whatever its real size. A 400px decorative shape covers most of its section.

.card {
  background-image: url('/uploads/shape.png'); /* 400px wide */
}

The image-set() descriptors are relative to a fixed 1024px reference, so the 400px variant gets 0.39x. Under auto the browser draws it at 400 / 0.39 ≈ 1024 CSS px.

  • When every background-size layer is auto (or the property is unset), descriptors are now relative to the asset's recorded width, so the drawn size matches the original.
  • Cover, contain and sized backgrounds are unchanged. They keep the 1024px reference and the same descriptors as today, so a DPR-1 screen still downloads the same variant.
  • 1024px stays as the fallback when an asset has no recorded width.

Verification

  • bun run build
  • bun run lint
  • bun test - 7063 pass, 0 fail
  • Docker/deployment check, if relevant - not relevant

The new auto / unset tests in src/__tests__/publisher/classStyleInjector.test.ts fail on main and pass with this change. The new cover/contain/sized tests pass on both. The existing descriptor tests keep their expected values and now set background-size: cover.

Checklist

  • Tests cover behavior changes.
  • Docs were updated when behavior, config, deployment, or public surfaces changed. One sentence in docs/features/publisher.md.
  • No compatibility shim was added for old pre-release behavior.
  • No secrets, local databases, uploads, or generated artifacts are included.

🤖 Generated with Claude Code

…ackground-size auto

image-set() density descriptors were normalised to a fixed 1024px reference,
so a background drawn at background-size: auto (or unset) rendered about
1024px wide whatever its real size. Under auto, descriptors are now relative
to the asset's recorded width. Cover, contain and sized backgrounds keep the
1024px reference unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant