[HTML5] Canvas is not loading on iPhone4

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

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?

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


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?


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.


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;

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


1 Like

Thanks for the report!

Should be resolved in dev version here:

1 Like

This can still happen on old iOS devices.


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

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


  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.

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.

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: