CSS IE7 sobreposição lenta
-
08-07-2019 - |
Pergunta
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>
Solução
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);
Outras dicas
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.
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.
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