I am using the vue-fullscreen plugin to trigger a fullscreen of an element in my code. I am calling the function using @click, yet despite that I am getting the following error:
Firefox:
Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.
Chrome:
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
As per threads like the following, Javascript request fullscreen is unreliable, I have have found the following warnings:
- Make sure it is generated directly by a user click.
I think I am.
- Make sure there is not more than a 1 second delay between the user generated action and the function.
I find no delay, especially given the function is incredibly short and direct.
- If you are using iframes, make sure you allow fullscreen parameters, including in any parent iframes.
I am not using an iframes.
Here is a snippet of my code:
HTML:
<div class="tool_circle_button" @click="toggleFullscreen"></div>
<fullscreen :fullscreen.sync="fullscreen">
Content
</fullscreen>
Javascript:
toggleFullscreen () {
console.log(this.fullscreen)
this.fullscreen = !this.fullscreen
},
Do these errors suggest that the @click command is not being recognized as a user-generated click? If not, what else could be causing this? Thanks so much for your help!
