Opacity sur un élément contenant une IFRAME : Quelle réaction
Définition de opacity sur le W3C :
Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
Conséquence :
Normalement, l'IFRAME devrait être inclue dans les éléments à "blurer".
Qu'en est-il de l'interprétation des différents navigateurs ?
Internet Explorer
1. Si l'IFRAME ou un de ses parents est en position: absolute/relative
L'IFRAME est opaque. L'effet (filter:alpha) ne s'applique pas sur elle.
2. Si l'IFRAME et tous ses parents jusqu'à l'élément pour lequel on applique l'opacité sont en position: static.
L'IFRAME est transparente, l'effet est correct.
Cela vient du fait que les filtres DirectX ne s'appliquent qu'aux éléments en display:block et aux sous-éléments non-absolute de ceux-ci.
Le comportement d'IE est correct selon ses propres spécifications, et généralement correct selon les specifications du W3C.
FireFox
L'IFRAME est transparente, l'effet est correct.pas sur elle.
Bravo à FireFox !
Opera
L'IFRAME est transparente.... mais elle se la joue perso !
Soit une DIV C, et qu'une DIV E contenu dans la DIV C masque une DIV D, elle aussi contenue dans DIC C
<div id="C" style="opacity: 0.5">
<div id="D" style="position: relative; top:0px; left: 0px; width: 30px; height: 30px; z-index: 0">
Je ne suis jamais visible, même sous opacity
</div>
<div id="E" style="position: relative; top:0px; left: 0px; width: 30px; height: 30px; z-index: 1">
En effet, c'est moi qui prime grâce à mon zIndex !
</div>
</div>
Même si on applique opacity à DIV C, la DIV D ne doit pas apparaitre, et surtout pas en semi-transparent.
Si je mets une IFRAME en lieu et place de ma DIV, L'IFRAME (assimilée à la DIV E de mon exemple) devient transparente et laisse entrevoir ce qui dans mon exemple est la DIV D.
C'est un bug.
Safari
Safari applique la transparence à l'IFRAME de manière tout à fait correcte.
Bravo à Safari !
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
François REMY est un jeune développeur belge plein d'entrain qui traite surtout des technologies du web et de DotNet dans ses articles.