webkit-filter changing z-index stacking order

Home / css / webkit-filter changing z-index stacking order

Question:
Why does applying a webkit filter changes the layers order?

See this minimal example:

setInterval(function(){

t.classList.toggle(‘grayed’);

}, 1000) .floater {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;
z-index: 99;
background: yellow;
display: none;
}
td:hover .floater{
display: initial;
}

.grayed td{
-webkit-filter: grayscale(0.5);
}

td{
padding: 1em;
text-align: center;
background: blue;
}

1 2 3
4 5
(Mouse over this)

HELLO
6
7 8 9

Answer:
Child’s z-index is set to the same stacking index as its parent, hence why it’s not working.
If you are willing to take the floater out of it’s table parent, you could try the below JS approach with mouseover & mouseout (to close).

setInterval(function() {
t.classList.toggle(‘grayed’);
document.querySelector(‘.floater’).classList.toggle(‘grayed’);
}, 1000)

document.querySelector(‘.toHover’).addEventListener(‘mouseover’, function() {
document.querySelector(‘.floater’).classList.add(‘open’);
})
document.querySelector(‘.floater’).addEventListener(‘mouseout’, function() {
document.querySelector(‘.floater’).classList.remove(‘open’);
}) .floater {
position: fixed;
top: 5vh;
left: 5vw;
width: 90vw;
height: 90vh;
z-index: 1;
background: yellow;
display: none;
}

.grayed td {
-webkit-filter: grayscale(0.5);
}

.grayed {
-webkit-filter: grayscale(0.5);
}

.open {
display: initial;
}

td {
padding: 1em;
text-align: center;
background: blue;
}

1 2 3
4 5
(Mouse over this)

HELLO
6
7 8 9
HELLO

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *