react-fullscreen-crossbrowser
react-fullscreen-crossbrowser copied to clipboard
vasilevich
"requestFullscreen is not a function" in safari iOS
Trying to get fullscreen display goes white and UI blocked, so there's no way to restore it but reloading page.
Hello mate, can you please describe your enivorment?
did you use typescript or javascript? any sample use so I can reproduce? thanks
Sure, I'm using JS on react@16. I'm having something like this:
<Fullscreen
className={ classes.FullscreenWrapper }
enabled={this.state.zoom}
onChange={zoom => this.setState({zoom})}
>
<div className={ classes.FreeHandBox }>
<SignaturePad
options={{ penColor: 'blue' }}
redrawOnResize={true}
ref={localRef => this.canvas = localRef}
/>
<Button
bsSize="small"
onClick={ () => this.clearCanvas() }
className={ classes.FreeHandCleanCanvas }>
<Glyphicon glyph="repeat" />
</Button>
<Button
bsSize="small"
onClick={ () => this.toggleZoom() }
className={ classes.FreeHandZoomCanvas }>
<Glyphicon glyph="fullscreen" />
</Button>
</div>
</Fullscreen>
What I'm doing is using react-screen-orientation to be able to go fullscreen when phone is set in landscape. So signature pad gets full screen with 2 simple UI buttons. This works fine in Chrome and Firefox, but for Safari iOS seems to not be able to recognize the requestFullscreen call, and ends with browser completely white (like a broken fullscreen(?) ). I peeked on your code and prefix seems to be all set good. I'm still debugging it, but if you come across something here please do tell :). Thanks!
PS: what about adding a prop for custom class name? (As the className prop above gets overwritten by component.)
Hi, this might help you debug, does the example in this url work for you? http://fscreen.rafrex.com/
or same result?
well I am not sure, seems that way, but maybe there is a specific way to do this in safari? maybe the web browser just can't do it
As I've looked around is a known issue around iOS' Safari not supporting fullscreenAPI. "Solution" so far for me is to disable feature for mobile Safari. Total bummer.
Still this issue exists as it tries to use it and breaks with that message above.
well if you have a suggestion how to prevent it from running on the problematic platform please make a pull request and I will update the module shortly.
@vasilevich this is the error: https://github.com/vasilevich/react-fullscreen-crossbrowser/blob/master/src/index.tsx#L113
The enabled is been missconfused with the element I assume, being undefined when fullscreenAPI support is missing, and null when it do has support but there's no element on fullscreen. So I guess you should use fullscreenEnabled() value there, and if that value is true then go on, if not maybe a console.log() letting dev know the lack of support in the browser being tested.
I'm currently busy and don't have time to code/test/PR it now, but I think fixing so ^ should be enough.
Hi friend, I will gladly add what you asked but I am sorry I have no way of testing it, I don't have any IOS devices available. I will add what you asked as soon as possible and let you know if you want. what if I simpley add try{ ... } catch to that block and in the catch enter the console log you mentioned? seems like the easiest way?
Sorry for posting after many years. I thought this would be very useful for those that crashed into ios/safari issues: https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen
@pleytonsoftware how did you solve this for using this react-fullscreen-crossbrowser package? did you override the fullscreen onclick functionality to use webkitenterfullscreen() instead, or remove this package and implement your own solution?
