filtros - filter css generator

¿Por qué cambia el orden de apilamiento en el filtro webkit?

Question

He notado un problema extraño con mi orden de apilamiento al aplicar un filtro webkit. ¿Por qué, cuando paso el mouse sobre la imagen, cambia el orden de apilamiento?

Prefiero no tener que usar la indexación z para solucionar esto, ya que rompe otros elementos del sitio.

Aquí está mi JSFiddle http://jsfiddle.net/r13ycy1p/

Disculpe Homero, solo necesitaba una imagen.

EDITAR: ¿Cómo puedo revertir los efectos para evitar que el div de posición absoluta se oculte?

Aquí está mi HTML

<ul>
<li>
<a href="#">
<div class="slide-content">
<div class="slide-title">
<h1>hello world</h1>
</div>
<div class="slide-desc">
<p>a description about something</p>
</div>
</div>
<img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>
</a>
</li>
</ul>

El CSS

li {
list-style:none;
}
.slide-content {
position:absolute;
color:red;
top:50px;
}
li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}

Answer 1

Esto se debe a que un valor distinto de none establece un contexto de apilamiento . Esto está documentado en la spec (que actualmente está en estado Borrador de trabajo):

2 interacciones del módulo

Esta especificación define un conjunto de propiedades CSS que afectan la representación visual de los elementos a los que se aplican esas propiedades; Estos efectos se aplican después de que los elementos han sido dimensionados y posicionados de acuerdo con el modelo de formato Visual de [CSS21]. Algunos valores de estas propiedades dan como resultado la creación de un bloque contenedor y / o la creación de un contexto de apilamiento .

También la especificación dice:

5 filtros gráficos: la propiedad de filtro

Un valor calculado distinto de none da como resultado la creación de un contexto de apilamiento [CSS21] de la misma manera que lo hace la opacidad CSS.