Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

onenter and onexit events not being fired in Firefox 45.0 #20

Open
terraboops opened this issue Mar 16, 2016 · 5 comments
Open

onenter and onexit events not being fired in Firefox 45.0 #20

terraboops opened this issue Mar 16, 2016 · 5 comments

Comments

@terraboops
Copy link

I haven't nailed down why this is happening, but these events are not being fired. This issue affects Firefox only.

I tested this in Firefox 45.0 -- but I suspect this is happening in other versions also.

Here is a minimum test case with jQuery that will reproduce the issue:

function onEnterFullscreen() {
    alert("I don't fire in Firefox!");
}

function onExitFullscreen() {
    alert("I also don't fire in Firefox!");
}

$('#photo-demo img').on('click', function() {
    if (BigScreen.element !== this) {
        BigScreen.request(this, onEnterFullscreen, onExitFullscreen);
    }
    else {
        BigScreen.exit();
    }
}); 

I've tried to write a unit test to reproduce this issue, however the Unit Tests do not actually activate the Fullscreen API because use of the Fullscreen API requires User Interaction.

It is possible to simulate User Interaction with sendEvent in PhantomJS, but other browsers will require an some sort of event handler. I haven't found a way to tell the browser that it's okay to allow Fullscreen API requests without User Interaction.

For my purposes, I'm just going to use an onclick handler and make the test pass and use the resulting lib for my project. However, I'm wondering what solution you'd like me to implement so that the Unit Tests are actually testing the Fullscreen API. Do you use any CI tools? Is an onclick handler acceptable? Can I simulate User Interaction with PhantomJS for the CI tests if there are any?

Thanks!

@terraboops
Copy link
Author

I found the issue, it's due to this block of code:

// If there's no element after 100ms, it didn't work. This check is for Safari 5.1
// which fails to fire a `webkitfullscreenerror` if the request wasn't from a user
// action.
setTimeout(function() {
    if (!document[fn.element]) {
        callOnError(iframe ? 'not_enabled' : 'not_allowed', element);
    }
}, 100);

In my own project, I've wrapped this in a User Agent test: navigator.userAgent.indexOf("Safari") > -1

@bdougherty
Copy link
Owner

Thanks for the detailed report! Seems like this is the same as #17. I generally dislike having to do UA detection, but I think it's the least bad way to handle it. Do you mind submitting a pull request with that change?

@bdougherty
Copy link
Owner

As for the tests, I'm happy to review a PR with any changes, but I want to note that I've started on a new major version that will be promise-based to match the latest spec. I definitely want to get better test coverage in actual browsers with the new version.

@terraboops
Copy link
Author

Yeah, I agree on avoiding UA strings -- but for a hack I thought it might be okay. If I think of something better I'll let you know.

I'll submit a PR right away. Cool stuff about the new major version, I'll keep an eye out for it.

terraboops pushed a commit to Hatsize/BigScreen that referenced this issue Mar 17, 2016
- Firefox events were not being called correctly because the hack for Safari was triggering an error, which removed the element from the BigScreen instance
@uc-ach
Copy link

uc-ach commented Jan 30, 2017

How this issue can be avoided?
Because i'm also having same issue .onenter and .onexit not working on Firefox, what to do

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants