AykutSarac/jsoncrack.com · warning

Unable to enter fullscreen mode.

Error message

Unable to enter fullscreen mode.

What it means

Toast shown when Element.requestFullscreen() rejects. fullscreenBrowser() calls document.documentElement.requestFullscreen() and attaches a .catch that toasts this message. requestFullscreen rejects if the document is not allowed to enter fullscreen (iframe without allowfullscreen / the fullscreen permission policy), if called outside a user gesture, or if the browser blocks it.

Source

Thrown at apps/www/src/features/editor/Toolbar/index.tsx:57

  align-items: center;
  gap: 4px;
  justify-content: space-between;
  height: 45px;
  padding: 6px 12px;
  background: ${({ theme }) => theme.TOOLBAR_BG};
  color: ${({ theme }) => theme.SILVER};
  z-index: 36;
  border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};

  @media only screen and (max-width: 320px) {
    display: none;
  }
`;

function fullscreenBrowser() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(() => {
      toast.error("Unable to enter fullscreen mode.");
    });
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

export const Toolbar = () => {
  return (
    <StyledTools>
      <Group gap="xs" justify="left" w="100%" style={{ flexWrap: "nowrap" }}>
        <StyledToolElement title="JSON Crack">
          <Flex gap="xs" align="center" justify="center">
            <JSONCrackLogo fontSize="14px" hideLogo />
          </Flex>
        </StyledToolElement>
        <FileMenu />
        <ViewMenu />
        <ToolsMenu />

View on GitHub (pinned to 3c9af69e23)

Solutions

1. Add `allowfullscreen` (and `allow="fullscreen"`) to any embedding iframe.
2. Ensure the call originates from a user gesture (click/keydown handler).
3. Provide a fallback UI affordance when Fullscreen API is unavailable (e.g. a maximized layout).
4. Detect document.fullscreenEnabled before offering the button.

Example fix

// before
function fullscreenBrowser() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(() => {
      toast.error("Unable to enter fullscreen mode.");
    });
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

// after — guard availability and keep the gesture
function fullscreenBrowser() {
  if (!document.fullscreenEnabled) {
    toast.error("Fullscreen is not available in this context (iframe/browser).");
    return;
  }
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(err => {
      toast.error(err?.name === "SecurityError" ? "Fullscreen blocked by embed settings." : "Unable to enter fullscreen mode.");
    });
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

// Check Fullscreen API availability before calling it
export function canFullscreen(): boolean {
  return typeof document !== "undefined" && document.fullscreenEnabled === true;
}

// Identify the security/blocking DOMException
export function isFullscreenBlocked(error: unknown): error is DOMException {
  return error instanceof DOMException && (error.name === "SecurityError" || error.name === "NotAllowedError");
}

// Guard availability, keep the gesture, classify the rejection
if (!canFullscreen()) { toast.error("Fullscreen is not available here."); return; }
document.documentElement.requestFullscreen().catch(err => {
  toast.error(isFullscreenBlocked(err) ? "Fullscreen blocked by embed settings." : "Unable to enter fullscreen mode.");
});

When it happens

Trigger: Clicking the fullscreen button inside a sandboxed iframe without `allowfullscreen`/`allow="fullscreen"`; calling requestFullscreen programmatically without a transient user activation; fullscreen already transitioning; embedded context blocking the API.

Common situations: Embedding the widget in a constrained iframe; programmatic fullscreen attempts; browser-specific gesture requirements; iOS Safari limitations (historically no Fullscreen API on iPhone).

Related errors

• Clipboard write permission denied. Please allow clipboard ac
• Invalid JSON!
• Failed to copy to clipboard
• Smart color scheme manager was unable to save color scheme.

AI-assisted analysis of AykutSarac/jsoncrack.com@3c9af69e23 (2026-08-12). Data as JSON: /api/errors/a9c6855a5b71708d. Report an issue: GitHub.