Problem with svg textures on iPhone, iPad and Safari on OSX

[bravewick]

It looks like the there is an issue with svg textures in base64 format, on on iPhone, iPad and Safari on OSX (physical devices).
When creating two sprites using to different svg textures the second sprite is rendered having the first textrure and on top it's normal one.

To demonstrate the issue i created the following code pen snippet.
http://codepen.io/bravewick/pen/NbBPvw (use iPhone or iPad)

It looks that the problem lies on the the WebGLRenderer. Using CanvasRenderer works fine. On mobile devices I had problems with iPhone, iPad (Chrome and Safari). On OSX the problem appeared on Safari only. PNG textures are working just fine.

I tried to track down the problem but without success. I will try to look more into this later.

[staff0rd]

Confirmed on iPhone 5S, iOS 9.3

[pianomister]

I had the same issue with PIXI v4.5.5, tested with iPhone 6S and iOS 10.3.3.
I have an idea what causes this "stacking bug" described by @bravewick above.

In my application, I am working with an isometric grid to place sprites, and sprites are also following this grid's base unit. Therefore I have e.g. the following sources to create a container ship scene (source paths contain the dimensions sizeX x sizeY x height):

source = [
	'assets/graphics/ship_10x17x10.svg',
	'assets/graphics/container_1x1x2.svg',
	'assets/graphics/grabber_1x1x2.svg',
	'assets/graphics/cables_1x1x3.svg',
	'assets/graphics/cabin_1x1x2.svg',
	...
];

This will render the following on canvas in iOS Safari, as you can see the container/grabber are rendered behind the cabin texture which should not be the case:

While narrowing down the problem, I made the following observations:

• The "stacking bug" seems to be related to the source texture's width (height does not seem to cause this bug, according to my tests). In my example above, I have several SVG graphics with the same width. These are the only textures that were "stacked" on render time. After I changed the size of the grabber SVG source, only the container was stacked behind the cabin. After adjusting that size too, all textures render correctly. Yay!
• The "stacking bug" only occurs among textures which are placed within the same PIXI container. If I place one 1x1x1 texture within the root container, and two more 1x1x1 within a child container, only those textures within the child container are stacking.

I hope this may help to fix the original problem.

[GoodBoyDigital]

Hi there! Closing this issue for now due to its inactivity. Sure Apple have sorted this one by now :D Feel free to give us a poke if you would like this issue reopened. Thanks 👍

[pianomister]

Hi @GoodBoyDigital,
unfortunately, this issue still exists – I just tested it on macOS High Sierra 10.13.3, Safari 11.0.3 using the Codepen linked in the first comment above. It also persists with pixi.js version 4.7.0.

I guess that this is still a bug within pixi.js, since there is a workaround when placing those graphics in separated PIXI containers (see my comment above). Thus I recommend to keep this issue open.

Currently I am short of time, but maybe it helps to add a link to the source code that is responsible for rendering/adding the SVG textures, so we can have a look into it. In case you do not intent to do so ;)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.