diff --git a/packages/core/useFullscreen/index.ts b/packages/core/useFullscreen/index.ts index 682a41a78e4..db43d847a06 100644 --- a/packages/core/useFullscreen/index.ts +++ b/packages/core/useFullscreen/index.ts @@ -76,6 +76,13 @@ export function useFullscreen( ].find(m => (document && m in document) || (targetRef.value && m in targetRef.value)) as any }) + const fullscreenElementMethod = [ + 'fullscreenElement', + 'webkitFullscreenElement', + 'mozFullScreenElement', + 'msFullscreenElement', + ].find(m => (document && m in document)) as 'fullscreenElement' | undefined + const isSupported = useSupported(() => targetRef.value && document @@ -84,6 +91,12 @@ export function useFullscreen( && fullscreenEnabled.value !== undefined, ) + const isCurrentElementFullScreen = (): boolean => { + if (fullscreenElementMethod) + return document?.[fullscreenElementMethod] === targetRef.value + return false + } + const isElementFullScreen = (): boolean => { if (fullscreenEnabled.value) { if (document && document[fullscreenEnabled.value] != null) { @@ -139,7 +152,9 @@ export function useFullscreen( } const handlerCallback = () => { - isFullscreen.value = isElementFullScreen() + const isElementFullScreenValue = isElementFullScreen() + if (!isElementFullScreenValue || (isElementFullScreenValue && isCurrentElementFullScreen())) + isFullscreen.value = isElementFullScreenValue } useEventListener(document, eventHandlers, handlerCallback, false)