CSS IE7 sobreposição lenta

Question

Quando eu pressionar um botão uma sobreposição aparece. No Firefox a sobreposição é rápido, nada de especial. Mas no IE7 a sobreposição é muito lento. Eu estava maravilha porque?

Aqui está o meu 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;
}

A sobreposição é ativado quando eu clicar em um botão. Tudo no IE funciona bem, mas a sobreposição é soooo lento. Alguma idéia de como vir?

EDIT: Quando eu uso opacidade e filtro, tudo neste div é também transparente. Isso eu não quero. Na sobreposição DIV que eu tenho uma outra div (DocAddCommentBox). Esta div pode não ter transparancy. Como posso resolver isso?

EDIT: Solução:

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

E em html eu usei:

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

Answer 1

A sua overlay.png tem um canal alfa / transparência? Se assim for, experimentá-lo sem a transparência. De memória, IE é terrivelmente lento no processamento tais coisas.

O que gostaria de fazer é usar CSS para a transparência.

Set opacidade assim:

Opacity:0.5;

Infelizmente não é suportado no IE, por isso também tem que usar um personalizado atributo IE:

filter: alpha(opacity=50);

Answer 2

Você não precisa a sintaxe opacidade, tudo o que você precisa fazer é fazer com que suas imagens transparentes maior do que 1px ou 2px, 20px mínimo vai funcionar. Principalmente, imagens com background-repeat e especialmente os que têm muitas repetições para preencher o espaço vazio que eles fazem o seu IE7 muito mais lento do que os outros.

Answer 3

Aqui está o CSS de sobreposição que eu usei no meu projeto:

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

apenas se livrar do PNG.

Answer 4

Eu tinha exatamente o mesmo problema e a seguinte solução funcionou perfeitamente sem jogar com o atributo opacidade adicional. Ele ainda requer IE para filtrar uso, mas parece mais limpo para mim.

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

Um grande explicação para o truque gradiente filtro IE e benefícios de não usando o atributo opacidade em fundos pode ser encontrado abaixo

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