Bug in Pixi.js AssetLoader

[Sebi]

Hi,

 

I'm trying to load a spritesheet via JSON and got the following error in IE:
"Texture Error: frame does not fit inside the base Texture dimensions".

 

Weird that it only happened in IE, not in other browsers.

The JSON is valid and no frame is bigger than the texture dimensions but checking the console I saw that in IE..

the basetexture has 0 width and 0 height.

 

How to solve that issue?

 

 

Here is an example, they have the same issue:

http://peepsquest.com/tutorials/isometric-tiles-with-height.html

 

Doesn't get displayed on IE, what could be the reason for that? if i enable script debugging, it shows the thrown error for dimensions.

[Sebi]

I have attached a screenshot.

The JSON of peepsquest is here: http://peepsquest.com/tutorials/examples/img/roadTiles.json

The image file is here: http://peepsquest.com/tutorials/examples/img/roadTiles.png

 

On my own script, I don't use rotated or trimmed, so that can't be the issue.

There must be a bug while loading the images for IE. The script works perfectly fine in Fox, Chrome, etc, just not IE.

My own script works fine in those browsers too.

 

In an other script, I just experienced that IE didn't work again but worked as soon as I had the debug console open...

When I closed the debug console and refreshed the page, it didn't work LOL..

 

When I open the source in the debug console, it shows me that there is a width and a height for the image.

But the baseTexture doesn't have that set.

[Akis]

I'm not fully sure, but here is my investigation...

 

The issue occurs when the image is in cache. The script seems to go in this part of the code in BaseTexture because the image is already cached (loaded)

		if(this.source.complete)		{			this.hasLoaded = true;			this.width = this.source.width;			this.height = this.source.height;						PIXI.texturesToUpdate.push(this);		}

But the width/height are not retrieved from the source. It seems the object doesn't have the info yet.

You can put a breakpoint before, and after this.width/this.height and you'll see.

 

Before, you'll see this.source.width with a value, so if you continue the script, everything will be fine.

After, you'll see this.source.width with a value, but when the assignation to this.width was done, the value of the source was 0. And that's why you have your problem when loading the frames of your spritesheet.

 

I'm guessing this happen in every projects who uses spritesheets with IE (11 only?)

[bubamara]

hm, maybe it is related to this issue ? http://goo.gl/vL7zmK

 

quoting from the link :

 

 

I have find the problem. Stupid IE cannnot calculate display: none; image's width and height. 

[Sebi]

I'm not fully sure, but here is my investigation...

 

The issue occurs when the image is in cache. The script seems to go in this part of the code in BaseTexture because the image is already cached (loaded)

		if(this.source.complete)		{			this.hasLoaded = true;			this.width = this.source.width;			this.height = this.source.height;						PIXI.texturesToUpdate.push(this);		}

But the width/height are not retrieved from the source. It seems the object doesn't have the info yet.

You can put a breakpoint before, and after this.width/this.height and you'll see.

 

Before, you'll see this.source.width with a value, so if you continue the script, everything will be fine.

After, you'll see this.source.width with a value, but when the assignation to this.width was done, the value of the source was 0. And that's why you have your problem when loading the frames of your spritesheet.

 

I'm guessing this happen in every projects who uses spritesheets with IE (11 only?)

 

That sounds logical but I believe that there is probably more to that whole issue in IE:

Maybe the onload handler gets called too early at some point of the script or something that is suppose to happen after the onload handler finished, is running too early and causing this bug in IE. 

 

Maybe there is a way to take the json.meta.size.w and json.meta.size.h and force this on cached images. Since that is the meta data that we are looking for anyway.

[Akis]

The exception doesn't occur if we access the page directly (instead of an iframe): http://peepsquest.com/tutorials/examples/isometric-tiles-with-height0.html

 

But still you have another issue because we don't see anything with IE11.

[1-800-STAR-WARS]

Having this issue too. On first (clean) load, everything works fine in IE11 - but if the images are already cached, nothing is displayed on the screen. Did anyone figure this out?

[Peg Digital]

We're having this same issue on PIXI 1.4.4 with IE11. Cached images sometime won't load - no errors - just blank display. Clear cache and refresh and all is well. Struggling to suss this one out!

[Peg Digital]

OK we solved the issue we were having and thought we'd share. Turns out it was caused by IE being sensitive about the crossOrigin Boolean. If this isn't set to true when you're using asset loader to load your images, they won't show up when cached. All other browsers don't seem to mind but for IE, then must be passed as true and you should be all set :-)

[Mat Groves]

OK we solved the issue we were having and thought we'd share. Turns out it was caused by IE being sensitive about the crossOrigin Boolean. If this isn't set to true when you're using asset loader to load your images, they won't show up when cached. All other browsers don't seem to mind but for IE, then must be passed as true and you should be all set :-)

 

Hey guys,

 

If this is the case, I should set the crossOrigin to always be true? And the issue would be solved? It's very odd behaviour from IE :/ 

 

Thanks!

[Sebi]

Thanks for posting, I'll check this out!

[1-800-STAR-WARS]

Setting crossOrigin to true worked here too. Cheers! I guess setting crossOrigin to default to true wouldn't be harmful, if people have a specific reason to turn it off then they still can, for most people it won't make a difference except in IE.

[Peg Digital]

Yeah I agree, we found it was only IE11 that specifically had an issue with this. Very odd, but then it wouldn't be the first time IE has thrown us a curve ball....

[Mat Groves]

Yeah I agree, we found it was only IE11 that specifically had an issue with this. Very odd, but then it wouldn't be the first time IE has thrown us a curve ball....

 hehe! so true!

 

Cool - will set cross domain to be true by default for the next push. Thanks again for finding a solution for this one! Makes my life a lot simpler