{"record":{"id":"a9c6855a5b71708d","repo":"AykutSarac/jsoncrack.com","slug":"unable-to-enter-fullscreen-mode","errorCode":null,"errorMessage":"Unable to enter fullscreen mode.","messagePattern":"Unable to enter fullscreen mode\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"apps/www/src/features/editor/Toolbar/index.tsx","lineNumber":57,"sourceCode":"  align-items: center;\n  gap: 4px;\n  justify-content: space-between;\n  height: 45px;\n  padding: 6px 12px;\n  background: ${({ theme }) => theme.TOOLBAR_BG};\n  color: ${({ theme }) => theme.SILVER};\n  z-index: 36;\n  border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};\n\n  @media only screen and (max-width: 320px) {\n    display: none;\n  }\n`;\n\nfunction fullscreenBrowser() {\n  if (!document.fullscreenElement) {\n    document.documentElement.requestFullscreen().catch(() => {\n      toast.error(\"Unable to enter fullscreen mode.\");\n    });\n  } else if (document.exitFullscreen) {\n    document.exitFullscreen();\n  }\n}\n\nexport const Toolbar = () => {\n  return (\n    <StyledTools>\n      <Group gap=\"xs\" justify=\"left\" w=\"100%\" style={{ flexWrap: \"nowrap\" }}>\n        <StyledToolElement title=\"JSON Crack\">\n          <Flex gap=\"xs\" align=\"center\" justify=\"center\">\n            <JSONCrackLogo fontSize=\"14px\" hideLogo />\n          </Flex>\n        </StyledToolElement>\n        <FileMenu />\n        <ViewMenu />\n        <ToolsMenu />","sourceCodeStart":39,"sourceCodeEnd":75,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/editor/Toolbar/index.tsx#L39-L75","documentation":"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.","triggerScenarios":"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.","commonSituations":"Embedding the widget in a constrained iframe; programmatic fullscreen attempts; browser-specific gesture requirements; iOS Safari limitations (historically no Fullscreen API on iPhone).","solutions":["Add `allowfullscreen` (and `allow=\"fullscreen\"`) to any embedding iframe.","Ensure the call originates from a user gesture (click/keydown handler).","Provide a fallback UI affordance when Fullscreen API is unavailable (e.g. a maximized layout).","Detect document.fullscreenEnabled before offering the button."],"exampleFix":"// before\nfunction fullscreenBrowser() {\n  if (!document.fullscreenElement) {\n    document.documentElement.requestFullscreen().catch(() => {\n      toast.error(\"Unable to enter fullscreen mode.\");\n    });\n  } else if (document.exitFullscreen) {\n    document.exitFullscreen();\n  }\n}\n\n// after — guard availability and keep the gesture\nfunction fullscreenBrowser() {\n  if (!document.fullscreenEnabled) {\n    toast.error(\"Fullscreen is not available in this context (iframe/browser).\");\n    return;\n  }\n  if (!document.fullscreenElement) {\n    document.documentElement.requestFullscreen().catch(err => {\n      toast.error(err?.name === \"SecurityError\" ? \"Fullscreen blocked by embed settings.\" : \"Unable to enter fullscreen mode.\");\n    });\n  } else if (document.exitFullscreen) {\n    document.exitFullscreen();\n  }\n}","handlingStrategy":"validation","validationCode":"// Check Fullscreen API availability before calling it\nexport function canFullscreen(): boolean {\n  return typeof document !== \"undefined\" && document.fullscreenEnabled === true;\n}","typeGuard":"// Identify the security/blocking DOMException\nexport function isFullscreenBlocked(error: unknown): error is DOMException {\n  return error instanceof DOMException && (error.name === \"SecurityError\" || error.name === \"NotAllowedError\");\n}","tryCatchPattern":"// Guard availability, keep the gesture, classify the rejection\nif (!canFullscreen()) { toast.error(\"Fullscreen is not available here.\"); return; }\ndocument.documentElement.requestFullscreen().catch(err => {\n  toast.error(isFullscreenBlocked(err) ? \"Fullscreen blocked by embed settings.\" : \"Unable to enter fullscreen mode.\");\n});","preventionTips":["Add allowfullscreen / allow=\"fullscreen\" to embedding iframes.","Call requestFullscreen only from a user gesture.","Detect document.fullscreenEnabled before showing the button."],"tags":["fullscreen-api","browser","iframe","permissions"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}