GWT: problème de transparence d'Internet Explorer

Question

Ce message concerne uniquement IE. La dernière ligne du code suivant provoque le problème.

int width = 200; 
    int height = 200; 
    int overHeight = 40; 

    AbsolutePanel absPanel = new AbsolutePanel(); 
    absPanel.setSize(width + "px", height + "px");  

    SimplePanel underPanel = new SimplePanel(); 
    underPanel.setWidth(width + "px"); 
    underPanel.setHeight(height + "px"); 
    underPanel.getElement().getStyle().setBackgroundColor("red");   

    SimplePanel overPanel = new SimplePanel(); 
    overPanel.setWidth(width + "px"); 
    overPanel.setHeight(overHeight + "px"); 
    overPanel.getElement().getStyle().setBackgroundColor("black"); 
    //Setting the IE opacity to 20% on the black element in order to obtain the see through effect. 
    overPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=20)"); 

    absPanel.add(underPanel, 0, 0); 
    absPanel.add(overPanel, 0, 0); 

    RootPanel.get("test").add(absPanel); 

    //The next line causes the problem. 
    absPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=100)"); 

Donc, fondamentalement, ce code devrait afficher un carré rouge de 200px par 200px (voir underPanel dans le code) et sur le dessus de celui-ci un rectangle noir de 200px par 40px (voir imposte dans le code). Cependant, le rectangle noir est partiellement transparent car sa transparence est fixée à 20%, il devrait donc apparaître en rouge, mais d'un rouge plus foncé que le rectangle, puisqu'il s'agit en réalité d'un élément noir délavé.

Certains problèmes de rendu se produisent en raison de la dernière ligne de code qui définit l'opacité du AbsolutePanel contenant à 100% (ce qui en théorie ne devrait pas affecter le résultat visuel). En effet, dans ce cas, le panneau qui se trouve encore à travers, mais voir à travers la couleur de fond de la page! C'est comme si le panel n'était pas du tout là-bas ...

Des idées?

Ceci est sous GWT 2.0 et IE7.

Answer 1

IE7 fait les choses un peu différemment. Essayez ceci:

absPanel.getElement().getStyle().setProperty("msFilter", 
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"); 

Vous pouvez en lire davantage ici:

http://www.quirksmode.org/css/opacity.html

Answer 2

Vous pouvez également inclure IE9.js (http://code.google.com/p/ie7-js/) de Dean Edwards, il vous permet d'utiliser la propriété d'opacité pour vos classes css (et bien d'autres choses sympas, par exemple l'utilisation de pseudo-sélecteurs!). Je l'ai utilisé avec succès dans plusieurs projets basés sur GWT. Aussi, je voudrais définir une classe CSS (setStyleName()) au lieu de définir le style en ligne de l'élément d'interface utilisateur.

Answer 3

Juste pour être complet ... la dernière GWT 2.4 a la méthode:

Style.setOpacity() 

qui est correctement traduit sur toutes les plateformes actuelles du navigateur (y compris IE6, IE7, IE8)