Skip to content

fix(kitchen-sink): avoid black paper in fullscreen - #86

Merged
kumilingus merged 1 commit into
clientIO:mainfrom
MartinKanera:fix/kitchen-sink-fullscreen-bg
Oct 19, 2026
Merged

kumilingus merged 1 commit into
clientIO:mainfrom
MartinKanera:fix/kitchen-sink-fullscreen-bg

Conversation

@MartinKanera

@MartinKanera MartinKanera commented Oct 15, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #87

Clicking fullscreen in the Kitchen Sink demo on https://www.jointjs.com/demos/kitchen-sink turns the paper area black.

Why

On jointjs.com the demo runs inside an iframe. Fullscreen then makes the <iframe> the fullscreen element, and the browser paints a black backdrop behind it. The paper area (.paper-container) had no background of its own, so the backdrop showed through. Opened directly, the browser's default white canvas hid the problem, which is why it didn't reproduce locally.

Changes

  • .paper-container now sets background: var(--jj-bg-primary) (white) in all 7 kitchen-sink variants.
  • No visual change when the demo is opened directly.

Testing

Tested kitchen-sink/ts in Chromium (Playwright), with the demo in an iframe:

  • Before: fullscreen element is the iframe, backdrop rgb(0, 0, 0), paper black.
  • After: paper white at 100% and 20% zoom; a scan of the fullscreen view found no transparent areas.
  • Opened directly: fullscreen looks the same as before.

The other 6 variants get the identical one-line change but were not built or run.

🤖 Generated with Claude Code

When the demo is embedded in an iframe, as on jointjs.com, fullscreen
makes the iframe the fullscreen element and the browser paints a black
backdrop behind it. The paper area had no background of its own, so
the backdrop showed through. Opened directly, the browser's default
white canvas hid the problem.

Applied to all kitchen-sink variants.
@kumilingus
kumilingus merged commit 0fbc7d6 into clientIO:main Oct 19, 2026
1 check passed
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.

fix: kitchensink demo's paper goes black on fullscreen

2 participants