CSS IE7 overlay lento

Question

Quando premo un pulsante appare un overlay. In Firefox l'overlay è veloce, niente di speciale. Ma in IE7 l'overlay è molto lento. Mi chiedevo perché?

Ecco il mio 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;
}

L'overlay viene attivato quando faccio clic su un pulsante. Tutto in IE funziona bene, ma l'overlay è davvero lento. Qualche idea come mai?

EDIT: Quando uso Opacità e filtro, tutto su questo div è anche trasparente. Questo non lo voglio. Sul div overlay ho un altro div (DocAddCommentBox). Questo div potrebbe non avere trasparenza. Come posso risolvere questo?

EDIT: soluzione:

.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 in HTML ho usato:

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

Answer 1

Il tuo overlay.png ha un canale alfa / trasparenza? In tal caso, provalo senza la trasparenza. Dalla memoria, IE è terribilmente lento nel rendere tali cose.

Quello che vorrei fare è usare i CSS per la trasparenza.

Imposta l'opacità in questo modo:

Opacity:0.5;

Sfortunatamente non è supportato in IE, quindi dobbiamo anche usare un attributo IE personalizzato:

filter: alpha(opacity=50);

Answer 2

non hai bisogno della sintassi dell'opacità, tutto ciò che devi fare è rendere le tue immagini trasparenti più grandi di 1px o 2px, funzionerà almeno 20px. Principalmente, le immagini con ripetizione dello sfondo e specialmente quelle che hanno molte ripetizioni per riempire lo spazio vuoto rendono il tuo IE7 molto più lento degli altri.

Answer 3

ecco il CSS dell'overlay che ho usato nel mio progetto:

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

basta sbarazzarsi del PNG.

Answer 4

Ho avuto lo stesso identico problema e la seguente soluzione ha funzionato perfettamente senza giocare con l'attributo opacità aggiuntivo. Richiede ancora IE per usare il filtro ma mi sembra più pulito.

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

Una grande spiegazione per il trucco del gradiente del filtro IE e i vantaggi di non utilizzare l'attributo di opacità sugli sfondi sono disponibili di seguito

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