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 :
Publié 05 février 08 07:00 par FREMYCOMPANY
Classé sous : ,

Commentaires

# coucou747 said on février 5, 2008 08:40:

Le comportement d'IE est correct selon ses propres spécifications

logique...

# FREMYCOMPANY said on février 5, 2008 10:16:

Non, ce n'est pas si logique que cela ;)

Regarde Opéra. Il utilise les specs W3C mais ne les respecte pas.

IE utilise les filtres DirectX depuis bien longtemps, avant même la création d'opacity par le W3C. Normal donc qu'il ne gère pas opacity au profit des filtres DirectX.

Néamoins, il faut savoir que les filtres DirectX n'ont pas le même comportement que les autres règles CSS. C'est pour ca que j'ai mis cette phrase.

Smile

Les commentaires anonymes sont désactivés

About FREMYCOMPANY

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.


Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01




Search

Go

Ce blog

Abonnements