Support fullscreen on iOS

[parasyte]

See #740 and #747 for previous discussion.

iOS does not support the fullscreen API, like desktop browsers. Instead, it has a buggy hack that attempts to make the UI "minimal" in portrait orientation when a page is scrolled. (This was available in iOS7 as the minimal-ui viewport settings, but it's now long gone!)

An additional problem is that the canvas autoscaling we use (which is kind of broken, anyway/needs to be replaced with a reactive resize) makes iOS9 fail to enter fullscreen mode in landscape orientation!

So that's two issues:

• Can't enter minimal UI mode in portrait.
• Can't enter fullscreen mode in landscape.

I found that adding a 1px-high div is the easiest workaround to fix the landscape issue. This tricks iOS into seeing that there is more content on the page than can fit with UI. And because we request apple-mobile-web-app-capable, iOS will enter fullscreen mode.

I also tried brim. And though it works, it also causes chaos with our autoscaling! After rotating the mobile device with brim, the screen scaling will be way off. To correct the scale, you have to tap the top/bottom of the screen to show the UI then use brim's mask element to hide the UI again.

[parasyte]

I'm convinced brim is the way to go with this issue. Just need to fix that wonky autoscaling thing!

[parasyte]

Here's how it looks with brim; click to play video. (Not showing orientation change, since the bug is a disaster.)

[obiot]

never heard about brim before, but it;s super nice ! I also had a super quick look at the source code, and although some issues are probably linked to iOS9, I could see (I think) where would potentially be the points of conflicts with melonJS :
https://github.com/gajus/brim/blob/master/src/brim.js#L99-L101

[obiot]

btw, what did you use to do the video?

[parasyte]

QuickTime Player! I just used the builtin screen recording.

[parasyte]

Oh, and I'm using the iOS Simulator (part of Xcode) for iOS9 testing, since I don't have iOS9 installed on my phone.

(I used the simulator while developing Lovely Drive, too. I found that it's not bug-for-bug compatible with iOS. But if your code does not rely on bugs, the simulator is definitely good enough.)

[obiot]

giving more thoughts about this one, this should definitely rather be added in the boilerplate, rather than melonJS itself :

• this is a iOS specific workaround : https://caniuse.com/#feat=fullscreen
• is grim still working > ios8 ?
• 20k un-minified to dress one specific "use case"