Fiks fullskjerm: portal til document.body for å unngå Canvas transform
Canvas sin CSS transform bryter position:fixed (kjent CSS-gotcha). Fullskjerm flytter nå DOM-elementet til body, og tilbake ved exit. z-index 9999 og bakgrunnsfarge #0a0a0b. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
df8b3b2f2e
commit
b57efa1dc6
1 changed files with 23 additions and 1 deletions
|
|
@ -126,8 +126,29 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- Fullscreen toggle ---
|
// --- Fullscreen toggle ---
|
||||||
|
// Fullscreen panels must escape Canvas's transform context,
|
||||||
|
// which breaks position:fixed. We move the DOM element to
|
||||||
|
// document.body when entering fullscreen, and back when exiting.
|
||||||
|
let originalParent: HTMLElement | null = null;
|
||||||
|
let originalNextSibling: Node | null = null;
|
||||||
|
|
||||||
function toggleFullscreen() {
|
function toggleFullscreen() {
|
||||||
isFullscreen = !isFullscreen;
|
isFullscreen = !isFullscreen;
|
||||||
|
if (containerEl) {
|
||||||
|
if (isFullscreen) {
|
||||||
|
originalParent = containerEl.parentElement;
|
||||||
|
originalNextSibling = containerEl.nextSibling;
|
||||||
|
document.body.appendChild(containerEl);
|
||||||
|
} else if (originalParent) {
|
||||||
|
if (originalNextSibling) {
|
||||||
|
originalParent.insertBefore(containerEl, originalNextSibling);
|
||||||
|
} else {
|
||||||
|
originalParent.appendChild(containerEl);
|
||||||
|
}
|
||||||
|
originalParent = null;
|
||||||
|
originalNextSibling = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
onFullscreenChange?.(isFullscreen);
|
onFullscreenChange?.(isFullscreen);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -438,11 +459,12 @@
|
||||||
.blockshell-fullscreen {
|
.blockshell-fullscreen {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
z-index: 50;
|
z-index: 9999;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border: none;
|
border: none;
|
||||||
|
background: #0a0a0b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blockshell-minimized {
|
.blockshell-minimized {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue