Active element overflowing in grid view

[HeuristicPerson]

trafficstars

When navigating the grid view, the active element can overflow the grid area during the transition animations. The bug is not affecting the non-active tiles that are properly cropped by the limits of the grid area.

The first image shows the bug in action; notice how the non selected elements are properly cropped.

And the second one shows the right display behaviour when the grid is static.

[Gemba]

Hmm. Does neither occour on ES 2.11.2 nor on the main/head (dev-version) with es-carbon-2021 theme.

I guess it is related to the theme (which one is it, btw?) you are using and how it uses zIndex, can you check with the theme provider first?

[HeuristicPerson]

It's my own theme. In the shown screen, the relevant elements should be the following ones; basically, I have three images:

1. A background .jpg
2. A transparent overlay (the genesis picture) which changes based on the selected system.
3. A background image for the grid area (a semitransparent .png darkening the tiles area) which is the only element with a specified zIndex value.

<image name="background" extra="true">
    <path>./_inc/images/background.jpg</path>
</image>

<image name="overlay" extra="true">
    <path>./_inc/images/overlay_${system.name}.png</path>
</image>

<image name="gamegrid-bg" extra="true">
    <path>./_inc/images/grid_bg.png</path>
    <origin>0 0</origin>
    <pos>0.0 0.0</pos> <!-- 80, 202 pixels -->
     <zIndex>10</zIndex>
</image>

<!-- This is the area containing the multiple thumbnails -->
<imagegrid name="gamegrid">
    <gameImage>./_inc/images/grid_tile_noimage.png</gameImage>          <!-- Default image when roms don't have an image defined -->            
    <margin>0.012500 0.022222</margin>                                  <!-- Margin between "cells" 24x24 pixels -->
    <padding>0.0 0.0</padding>
    <pos>0.085417 0.227778</pos> <!-- 164, 246 -->  
    <size>0.916667 0.577</size>
</imagegrid>

<gridtile name="default">
     <backgroundImage>./_inc/images/grid_tile_unselected.png</backgroundImage>
     <padding>0.004167 0.007407</padding> <!-- 8 8 pixels -->
     <size>0.156250 0.277778</size>                                      <!-- 300x300 -->
</gridtile>

<gridtile name="selected">
     <backgroundImage>./_inc/images/grid_tile_selected.png</backgroundImage>            
     <backgroundEdgeColor>F0F0F0F0</backgroundEdgeColor>
     <backgroundColor>F0F0F080</backgroundColor>
     <size>0.156250 0.277778</size>                                      <!-- 300x300 -->
</gridtile>

[Gemba]

It might be something how the theme is put together. Maybe turn to the forum, as there are more theme designers around and they may have come across a similar situation. Theme design is not my domain.

Did you try the keyboard shortcuts which may give you an hint on how your theme is rendered?

Codewise this line may have an impact on the rendering of your theme (and knock-on effects on others most likely), if you move it right before listRenderTitleOverlay(trans);. While it may fix your issue in the upper/first row, the effect may show up at the last element on a longer gamelist.

TL;DR: I would try the forum first.