Graphics object displaying inconsistently above and below tiles

[Jerorx]

Hi,

So I'm making a clone of BrowserQuest with phaser, for the practice. I'm displaying the tilemap without issues (using a JSON of the tmx map of the original game), and I'm now trying to reproduce the behavior of the square marker appearing to highlight the tile under the mouse. Here is how the marker is usually displayed, that's the white square (the mouse doesn't show up in the screenshots but is normally right over it):

Now, the desired behavior is that the square must appear above "ground level" tiles, but *under* high level tiles, like the top of houses, the canopy of the trees, etc. Below, and example of the tile not showing up above the canopy of a tree, as expected:

And here, an example of the square partially showing up, and partially being hidden by the roof of a house, which is also desired behavior:

These examples work fine, but often, the square displays abnormally, partially overlapping the tiles under which it should be, as in the example below:

The white line is the bottom line of the square, while the rest is hidden. Normally, the entire square should be hidden, there is no gap through which the bottom line should be visible. The tilemap displays perfectly otherwise.

How can I explain, and fix, this inconsistent behavior, of the square sometimes being fully or partially hidden by the overlapping tiles, as expected, but sometimes not, exhibiting parts of the square in a strange way?

Some details about my code:
- The tiles under which the square must appear belong to a specific layer, distinct from the other layers of tiles above which the square must appear ("ground-level tiles")
- Here is how my square is made:

Game.drawMarker = function(x,y,color) {
    Game.marker = Game.markerGroup.add(game.add.graphics());
    Game.marker.lineStyle(5, color, 1);
    Game.marker.canSee = true;
    Game.marker.drawRect(x, y, 32, 32);
};

- marker.canSee is a custom flag used to decide when to display it or not, works fine apparently
- In the update loop, whenever a change in the position of the marker is detected, it is destroyed and re-drawn at the new position (best way I found to be able to change its color at will depending on the tiles underneath), as follow:
 

Game.marker.destroy();
Game.drawMarker(marker_x,marker_y,(collide ? Game.collisionColor : Game.markerColor));

I have the issue in both Chrome 52.0.2743.116  and Firefox 47.0.1.

Edited September 1, 2016 by Jerorx
Adding pics

[Jerorx]

I "fixed" it by using a sprite for the marker instead of a graphics object.