My app does not work properly on iPad as HTML5 in Full Screen mode

Questions
#1

I have found, that my app doesn’t work properly on iPad (only).

I have record a screen video to show what is wrong.

You can try it by yourself here.

In “normal” mode all works fine, but in full screen mode by Landscape position, app will be scaled only approx. to 2/3 of a screen

By returning to “normal” mode, the app canvas has been wrong scaled:

  • the “full screen” button is not to see and
  • there are two black stripes above and under the app screen.

After turning of iPad to portrait and back to landscape position, canvas has been sized correct again.

My app is based on @dapetcu21’s “Crit - Building blocks for Defold games” (Great Thanks for publishing this modules collection ) and Crit example doesn’t work at the same art.

I have thought: Ok I try to bundle some examples to see, if it works, I have tried

  • Monarch example
  • Druid example and
  • Side Scroller tutorial

None of three app works on iPad as HTML5 bundle at all. They all can be downloaded, but fail to start. On Android (Galaxy Tab S2) and Windows the same build works fine.

Nevertheless, there is an app that works properly: that is @Dragosha ’s Hamster demo.

I do not know what is there different, but it works.

Unfortunately I have nearly no experience with Java Script / HTML /CSS and so on.

Some help with this issue would be very helpful for me.
Any Ideas how to fix this are welcome.

#2

Which setting do you have in game project for HTML5 Scale Mode?

#3

Online is “Downscale Fit” (as by default). I have tried “Fit” and “No Scale” : result is the same.

I have analysed difference between standard generated index.html and index.html of @Dragosha Hamster Demo
if I delete as by “Hamster” div wit ID = “canvas-container” and all references on it

	<div id="app-container" class="canvas-app-container">
	<!--	<div id="canvas-container" class="canvas-app-canvas-container"> -->
			<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="1280" height="800"></canvas>
	<!--	</div> -->

and in CSS

	#canvas-container {
		position: relative;
	}

and by extra_params

  custom_heap_size: 268435456,
 <!--  full_screen_container: #canvas-container, -->
  disable_context_menu: true|

then full screen works fine on iPad.
Why , I don’t know.

But the wrong canvas size by returning from full screen is still here
and on Windows platform (not on Android and iPad) the image by loading displayed smaller as it should.

image
image1920×1080 114 KB

#4

Finally, I have decided to disable Full Screen on iPad /Safari.

I have some vertical scrolls and they do not work, because of Up->Down gesture in Safari, that switch Full Screen mode off.

Unfortunately the code

var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

does not work because in “navigator.userAgent” string there aren’t substrings like iPad iPhone or iPod only Mac and Macintosh.