CSS IE7 overlay lento
-
08-07-2019 - |
Domanda
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>
Soluzione
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);
Altri suggerimenti
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.
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.
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