[BUG] Transition not working when background-color is applied

[manikos]

When the container element (not particularly the parent) has background or background-color property set to a value other than transparent, then the filter in transition breaks (it immediately shows the items instead of using transition).
However, when the background color is applied to the body or the html element, it works!

Filterizr version
2.2.3 (have not tested with other versions).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://yiotis.net/filterizr/
2. Inspect the Demo Gallery h1 element
3. Select the <main> element (it has no classes applied)
4. Set background-color: #123456;
5. Now, try to filter elements using the mouse.
6. Click on Cities (works). Click on All (notice the bug - instant show up of items!).

Expected behavior
The expected behavior should be without the flashing effect of filtering items.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Linux Mint
• Browser: Chromium (78), FF (70.0.1)

[wilbertcaba]

I landed here trying to figure out why fitlerInCss is not responding to any value I assign to it. I just removed the background-color on the parent container and oddly, just like @manikos mentioned before, it worked 🤔 and unfortunately this is not a solution I could implement.

[wilbertcaba]

I figured it out and is the fact that the "filtr-item filteredOut" elements get an inlined z-index: -1000.

By the time you want to filter these in again, the CSS transition effects DO happen but behind the parent element that has the background-color you applied and when the z-index: -1000 property gets removed, you only see these popping like pop corn instead of transitioning smoothly.

If you add a z-index value to the parent element deeper than -1000 you could run into issues where some elements are not clickable. To avoid any of these it's safer to create a pseudo-element for that parent with your background-color and a super deep z-index < -1000.

For example:

HTML:

<div class="container-with-background">
    <ul class="filters">
        <li class="filtr-item">List Element</li>
    </ul>
</div>

CSS with super deep z-index:

.container-with-background {
    position: relative;
}

.container-with-background::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: gray;
    z-index: -30000000;          /*   <----crazy-deep z-index   */
}

I hope it serves you.

[genu]

Can confirm this is an issue. In my case it isn't related to a background color per se, but rather a combination of a few styles a few levels up in the markup.

I recommend a different approach to managing the animation as there can be unpredicted side effects in the current approach.

[donkutbay]

@wilbertcaba adding that crazy minus z-index makes the items not clickable so it kind of defeats the purpose of filtering things.

[donkutbay]

Apologies for spamming,
add this to the parent with background color,
perspective: 1000px; transform-style: preserve-3d;
or any of those (both of them make the animation work)

[wilbertcaba]

@wilbertcaba adding that crazy minus z-index makes the items not clickable so it kind of defeats the purpose of filtering things.

@donkutbay As you can see, I mention this issue in my comment with an alternate fix:

If you add a z-index value to the parent element deeper than -1000 you could run into issues where some elements are not clickable. To avoid any of these it's safer to create a pseudo-element for that parent with your background-color and a super deep z-index < -1000...

Glad your solution worked as well.