Superposition lente de CSS IE7

Question

Lorsque j'appuie sur un bouton, une superposition apparaît. Dans Firefox, la superposition est rapide, rien de spécial. Mais dans IE7, la superposition est très lente. Je me demandais pourquoi?

Voici mon 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 superposition est activée lorsque je clique sur un bouton. Tout dans IE fonctionne bien, mais la superposition est tellement lente. Des idées, pourquoi?

EDIT: Lorsque j'utilise Opacity et filter, tout sur cette div est également transparent. Ce que je ne veux pas Sur le div superposé, j'ai un autre div (DocAddCommentBox). Cette div peut ne pas avoir de transparence. Comment puis-je résoudre ce problème?

EDIT: Solution:

.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;
}

Et en HTML, j'ai utilisé:

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

Answer 1

Votre superposition.png a-t-il un canal alpha / transparence? Si c'est le cas, essayez-le sans transparence. De mémoire, IE est terriblement lent à rendre de telles choses.

Ce que je ferais serait d'utiliser CSS pour la transparence.

Définissez l'opacité de la manière suivante:

Opacity:0.5;

Malheureusement, il n'est pas pris en charge dans IE. Nous devons donc également utiliser un attribut IE personnalisé:

filter: alpha(opacity=50);

Answer 2

vous n’avez pas besoin de la syntaxe Opacity, tout ce que vous avez à faire est de rendre vos images transparentes plus grandes que 1px ou 2px, minimum 20px fonctionnera. Principalement, les images avec répétition en arrière-plan et en particulier celles qui comportent de nombreuses répétitions remplissent l’espace vide qui rend votre IE7 beaucoup plus lente que les autres.

Answer 3

voici le CSS de superposition que j'ai utilisé dans mon projet:

#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]-->

juste se débarrasser du PNG.

Answer 4

J'ai eu exactement le même problème et la solution suivante a parfaitement fonctionné sans jouer avec l'attribut d'opacité supplémentaire. IE requiert toujours d’utiliser un filtre mais me semble plus propre.

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

Vous trouverez ci-dessous une excellente explication de l'astuce de dégradé de filtre IE et les avantages de ne pas utiliser l'attribut d'opacité sur les arrière-plans

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