CSS IE7 superposición lenta

Question

Cuando presiono un botón aparece una superposición. En Firefox, la superposición es rápida, nada especial. Pero en IE7 la superposición es muy lenta. Me preguntaba por qué?

Aquí está mi CSS:

.DocOverlayShow
{
    background: url("/Graphics/overlay bg.png");
    top:0px; 
    left:0px; 
    width:100%; 
    position:fixed; 
    padding:10px; 
}
.DocAddCommentBox
{
    color: #000;
    margin:0 auto;
    margin-top: 200px;
    width: 650px;
}

La superposición se activa cuando hago clic en un botón. Todo en IE funciona bien, pero la superposición es muy lenta. ¿Alguna idea de cómo?

EDITAR: Cuando uso Opacidad y filtro, todo en este div también es transparente. Esto no lo quiero. En el div de superposición tengo otro div (DocAddCommentBox). Este div puede no tener transparencia. ¿Cómo puedo resolver esto?

EDITAR: Solución:

.DocOverlayShow
{
    background-color: #0057C3;
    Opacity:0.5;
    filter: alpha(opacity=50); /*IE*/
    top:0px; 
    left:0px; 
    width:100%; 
    height: 100px;
    position:fixed; 
    padding:10px; 
    z-index: 1000;
}
.DocAddCommentBox
{
    background-color: #DBDBDB;
    color: #000;
    position: fixed;
    margin:0 auto;
    margin-top: 150px;
    width: 450px;
    z-index:2000;
}

Y en html he usado:

<div class="DocOverlayShow"></div>
<div class="DocAddCommentBox">Content</div>

Answer 1

¿Su overlay.png tiene un canal alfa / transparencia? Si es así, pruébalo sin la transparencia. De memoria, IE es terriblemente lento para representar tales cosas.

Lo que haría es usar CSS para transparencia.

Establezca la opacidad de esta manera:

Opacity:0.5;

Desafortunadamente no es compatible con IE, por lo que también tenemos que usar un atributo de IE personalizado:

filter: alpha(opacity=50);

Answer 2

no necesita la sintaxis de opacidad, todo lo que necesita hacer es hacer que sus imágenes transparentes sean más grandes que 1px o 2px, funcionará un mínimo de 20px. Principalmente, las imágenes con repetición de fondo y especialmente las que tienen muchas repeticiones para llenar el espacio vacío hacen que su IE7 sea mucho más lento que los demás.

Answer 3

aquí está el CSS de superposición que utilicé en mi proyecto:

#siteol {
  position: absolute;
  z-index:10000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #000;
  opacity: 0.7;
}

<!--[if IE]>
/* style for IE */
<style type="text/css">
#siteol  {
  filter: alpha(opacity=70);
}
</style>
<![endif]-->

simplemente elimine el PNG.

Answer 4

Tuve exactamente el mismo problema y la siguiente solución funcionó perfectamente sin jugar con el atributo de opacidad adicional. Todavía requiere que IE use el filtro, pero me parece más limpio.

background-color: rgba(244, 244, 244, 0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7ff4f4f4', EndColorStr='#7ff4f4f4');

A continuación se puede encontrar una gran explicación para el truco del gradiente del filtro de IE y los beneficios de no usar el atributo de opacidad en los fondos

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/