[HTML5] Canvas is not loading on iPhone4

Help
#1

Hello, I’m trying to test empty canvas on web mobile (Iphone4/chrome 47) but I got black screen,

I tested games developed with Openfl in this device and works fine.

I need to do extra setup? thanks

#2

Does OpenFL using -Dcanvas or -Ddom work? Have you connected to a web inspector to see if there is a JavaScript error on the device?

#3

I already tried with “openfl test html5 -Dcanvas” and -Ddom but the same result, the problem is I’m in Windows and the Iphone4 is not detected by chrome debugger, other devices works well

Here is my code

package;

import openfl.display.Bitmap;
import openfl.display.Sprite;
import openfl.Assets;
import openfl.display.StageScaleMode;
import openfl.Lib;


class Main extends Sprite {
	
	public function new () {
		super ();
		var bitmapData = Assets.getBitmapData ("assets/map.png");
		var bitmap = new Bitmap (bitmapData);
		addChild (bitmap);		
	}
}

Is there another way to debug on iphone 4?

thanks

#4

Well, I found the code that is throwing error.

TypeError: 'undefined' is not an object (evaluating 'window.performance.now')

If I comment all ‘window.performance.now()’ lines the game works on my iPhone4.

You can reproduce the error on Safaiy 5.1.7.

http://caniuse.com/#feat=nav-timing

if someone has the same problem you can fix it quickly adding this code on your HEAD tag

window.performance = (window.performance || {
  offset: Date.now(),
  now: function now() {
    return Date.now() - this.offset;
  }
});
#5

to debug html5 on iphone on windows with chrome you may use :


then
chrome://inspect

1 Like
#6

Thanks for the report!

Should be resolved in dev version here:

1 Like
#7

This can still happen on old iOS devices.

TypeError

#8

Huh, I wonder if System.getTimer is running before the Application init code is running

#9

Does adding this to your project solve the issue?

<dependency path="assets/dependency/performance-polyfill.js" rename="performance-polyfill.js" embed="false"/>

add the performance-polyfills.js in your assets:

// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015


// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
//   github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

// if you want values similar to what you'd get with real perf.now, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed


(function(){

  if ("performance" in window == false) {
      window.performance = {};
  }
  
  Date.now = (Date.now || function () {  // thanks IE8
	  return new Date().getTime();
  });

  if ("now" in window.performance == false){
    
    var nowOffset = Date.now();
    
    if (performance.timing && performance.timing.navigationStart){
      nowOffset = performance.timing.navigationStart
    }

    window.performance.now = function now(){
      return Date.now() - nowOffset;
    }
  }

})();

This code should be already included in openfl but maybe using a different file will fixed the problem.

EDIT: I already make this to one of my project with the very same issue while the polyfill was in my openfl version. I’m not 100% sure but I remember that the issue was gone after adding this dependency.

#10

Thanks for the solution, atm I have your code right in index.html:

window.performance = (window.performance || {
  offset: Date.now(),
  now: function now() {
    return Date.now() - this.offset;
  }
});

But I don’t have access to that old iPad I was testing on atm.

#11

Make sure you don’t include it in a directory that’s going to be preloaded as application assets, that way the browser doesn’t have to load the file twice. Not super-super important, but something to keep in mind with <dependency /> or <template /> tags in general :slight_smile: