jquery cycle IE7 transparent problème png
J'ai des difficultés à faire fonctionner le cycle jQuery lorsque j'ai des fichiers png transparents dans IE7
C'est bien dans Firefox et Chrome, mais dans IE (version 7), je reçois une couleur noire où La transparence du png est pendant le fondu.
Cela peut-il fonctionner correctement?
malheureusement, bien que IE7 prenne en charge les fichiers PNG transparents, un seul filtre peut être appliqué à un élément à la fois.
Ce qui se passe dans votre application, c’est que IE7 applique le filtre alpha à votre fichier PNG. JQuery demande ensuite à un autre filtre alpha d’appliquer le fondu. Cela a des résultats visibles, comme vous l'avez dit.
La solution consiste à imbriquer votre png dans un conteneur, puis à le fondre. Un peu comme ça:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
Un autre moyen de contourner ce problème est ce simple plugin jQuery que j’ai utilisé parce que je ne pouvais pas changer la structure. Je donnerais des attributions, mais honnêtement, je ne peux pas me rappeler où je les ai trouvées.
/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
NOTEÀ l'origine, le plug-in avait été écrit pour corriger la transparence PNG dans IE6, mais je l'ai modifié pour résoudre votre problème dans IE6 +.
Note: Je ne me souviens plus très bien, mais je pense qu'IE8 risque d'avoir le même problème. Corrige moi si je me trompe :)
Cela m'a rendu fou ces derniers jours! Enfin trouvé une solution décente qui fonctionne assez bien.
Ajoutez ceci à votre CSS:
img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}Crédit: Dan Tello
Essayez d'ajouter
cleartype: true,
cleartypeNoBg: true
à vos arguments de cycle jquery ..___. Ça devrait aller maintenant :)
Couplée à la tactique "envelopper l'image dans un div/fade the div" mentionnée précédemment, l'utilisation de cette ligne de CSS résoudra le problème IE:
# div img {
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = '../images/bubble_intro_ph1.png');
}
Pour moi, cela a fonctionné d'inclure simplement la propriété filter avec une valeur vide dans la fonction jQuery .animate ()
Peut-être que cela fonctionnera pour vous aussi.
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
Ok, j'ai donc pris la suggestion de Darko Z concernant la div. En fin de compte, c’est ce que j’ai dû faire pour que jQuery Cycler fadeing FX fonctionne sur IE avec drupal 7. Au lieu de placer une balise, j’ai utilisé divs et appliqué the.png au fond de l’image de même que
Alors j'ai changé ça:
<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>
pour ça:
<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>
alors dans le css j'ai fait:
.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}
et ça marche pour le moment = D.
J'espère que ça aide, Defigo
J'ai eu ce problème avec Drupal Views Slideshow en utilisant la transition de fondu sur les PNG transparents.
Je suis tombé par hasard sur la quasi-solution suivante. Je ne sais pas pourquoi cela fonctionne, mais l’inconvénient est qu’il supprime essentiellement l’enveloppe de fondu enchaîné dans IE (elle ne semble pas affecter visiblement FF ou Safari):
Le diaporama de vues imprimera quelque chose comme ce qui suit dans le cadre de sa sortie:
<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>
J'ai caché views-field-field-photo-fid:
.views-field-field-photo-fid { width: 0px; }
Pas parfait mais peut-être assez bon jusqu'à ce que je trouve une meilleure solution. Vous pouvez consulter le site de développement: http://acupuncture2.polishyourimage.com/
J'ai trouvé le correctif à ce bogue, ajoutez simplement ce qui suit à la division wrapping, à img et à d'autres éléments (par exemple, h1, h2, p)
#div, #div img {
background:none !important;
filter:none !important;
}
Cela va le réparer
Internet Explorer 7 a quelques problèmes avec des PNG transparents en décoloration. Si vous avez accédé à cette page car vous voyez une bordure noire où le Les bords transparents de votre fichier PNG sont, alors voici quelques conseils pour réparer le problème:
- Ne fondez pas l'élément directement, mais fondez un conteneur parent tenant le PNG. Cela peut signifier vous besoin d'ajouter un élément wrapper à votre code.
- Attribuez une couleur d'arrière-plan à l'élément parent.
- Enfin, si vous rencontrez toujours des problèmes, essayez de donner votre élément parent le vieux truc
zoom: 1. Donner la élément parent une déclaration de style dezoom: 1(via CSS ou un style en ligne.) Ceci forcera IE à donner le élémenthasLayout— qui tend à réparer toutes sortes de problèmes d'affichage étranges dans C'EST À DIRE.
Source:Atténuation d'un fichier PNG transparent 24 bits dans IE7 +
Malheureusement, cela signifie qu’il est impossible d’ajouter des PNG transparents sur un arrière-plan transparent, car vous devez appliquer une couleur d’arrière-plan à l’élément parent pour que la transition se déroule sans accroc, c’est-à-dire sans les pixels noirs. background: transparent ne fonctionnera pas (puisque transparent n’est pas vraiment une couleur). :(
J'utilise aussi la solution de Weezy mais ne joue pas à Nice avec IE7. Les effets sont encore pires.
Lors de l'affectation de jQuery opacity-property à animate-function au lieu de Black-Border-Bug, il génère un bogue Black & White-Border-Bug :-P
Dans la tête IE8 commentaire conditionnel avec le comportement de HTC sur la classe .fixpng en particulier pour htc.
<!--[if IE 8]>
<style type="text/css">
.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->
changé le fichier HTC en IE8pngfix.htc. Changé la ligne 75 dans le .htc à
!/MSIE (8) /. Test (navigator.userAgent
Il s'agit en fait d'un double filtre, d'abord IE conditionnel, puis en htc, mais que diable!
J'ai trouvé cela parce que htc pourrait interférer avec jQuery. Exemple;
[div id = "tooltip" class = "fixpng"]
Devait changer $ (div # tooltip) .css ({opacity: 0}) pour afficher: aucune en CSS et définir display: 'block' dans hover-event.
Donc, si quelqu'un a trouvé une solution de travail pour IE7, je serais vraiment heureux. Toutes les solutions de contournement/hacks ci-dessus ne fonctionnent pas pour moi. À propos d'IE6, je m'en fiche une seconde.
Je charge dynamiquement des png dans le DOM ... Cela a fonctionné pour moi: http://www.twinhelix.com/css/iepngfix/
C'est tout ce que l'on vous demande de faire. Tous codingsky très codant.
Voici ma suggestion. IE ne permettra pas à un arrière-plan au-dessus d'un arrière-plan coloré de vivre en paix, comme si ...
<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div>
<div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>
Notez que la première division est z-index 2 (au-dessus de la deuxième division).
Cela peut être simplifié en plaçant votre bgColor en arrière-plan dans la 1ère division et en supprimant la seconde. Cela résout le problème des zones noires. J'ai eu ce problème moi-même.
La seule façon pour moi de vous voir avoir un problème où vous ne pouvez pas utiliser cette méthode est de devoir superposer deux images d'arrière-plan png et les fondre à la fois. Ne fais pas ça. Vous devrez animer chacun après l'autre.
La solution la plus fiable est de ne pas utiliser de pngs dans les animations de style en fondu dans les navigateurs <IE9.
J'ai essayé presque tous les "correctifs" et variantes d'un correctif disponible que je pouvais trouver pour ce problème mais sans succès. La solution que j’avais utilisée était d’exporter des pngs contenant des animations de type fondu (par exemple, fadeIn/fadeOut) en gifs et d’effectuer un remplacement conditionnel pour <IE9. Bien que les gifs ne paraissent pas aussi bons que les pngs dans un navigateur moderne, ils ont un look bien meilleur que le rendu des pngs par IE8 et les versions antérieures, et cette méthode fonctionne de manière fiable. Vous continuez d’afficher Nice pngs pour des navigateurs performants et, lorsque le correctif est appliqué, rien d’autre ne se brise; la plupart des piratages png sont connus pour casser d'autres propriétés CSS. Votre code pourrait ressembler à quelque chose comme ça:
$(document).ready(function ()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9)
{
$(".myClass, .myOtherClass").each(function (val)
{
var backgroundValue = val.css("background-image");
backgroundValue.replace('.png', '.gif');
$(this).css("background-image", backgroundValue);
//you could just as easily do this with 'img' tags
});
}
}
Si vous pouvez vous permettre de sacrifier un peu de qualité d'image, vous pouvez enregistrer les images au format PNG-8 au lieu de PNG-24, puis appliquer le correctif mentionné par Prosini, à savoir.
cleartype: true, cleartypeNoBg: true
et cela devrait fonctionner. Avec PNG-24, je continuais à avoir un peu de marge noire pendant les transitions.
La solution de {WEEZY} a fonctionné pour moi!
J'ai peaufiné le fichier .htc plus loin et changé cette ligne:
var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
à:
var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);
En faisant cela, le script .htc ignorera tous les fichiers .png sauf si ils se terminent par .fixme.png (par exemple "transparant.fixme.png"). J'avais l'intention d'accélérer un peu le script et de veiller à ce que seuls les problèmes de fichier .pngs soient résolus (ceux que vous devez posséder sont transparents).
J'utilise d'autres .pngs qui sont non transparants, et n'ont donc pas besoin de ce script pour s'exécuter contre eux.
J'ai réécrit les méthodes fadeIn et fadeOut. Il semble que je n'ai pas la couleur noire sur l'image PNG. Aucun parent div est nécessaire. Vous utilisez quand même jQuery.
Cela m'a rendu fou pendant quelques jours et je suis finalement tombé sur la solution pour PNG de Unit. http://labs.unitinteractive.com/unitpngfix.php - fonctionne avec Cycle et m'a empêché de passer à une solution JPEG!
Il faut un peu de bricolage pour cibler des PNG spécifiques dans le cycle div, mais elle travaille!
Pour résoudre ce problème, ajoutez simplement:
"filtre": ""
.css () ou .animate () et résoudra un certain nombre de problèmes liés à IE.
Espérant aider quelqu'un qui rencontre ce problème:
J'avais des arrière-plans .png transparents (en mosaïque) sur quelques divs sur ma page et lorsque j'ai activé le plug-in jquery cycle, ces zones transparentes sont devenues vides. Ils ont perdu une partie de leur transparence.
Ma solution était simplement de rendre les carreaux beaucoup plus grands, de sorte qu'il n'y ait vraiment pas de carrelage. Il y a un petit compromis pour la taille du fichier, mais cela a résolu le problème.
- Définissez une couleur de fond unie pour votre image:
.container img {
couleur de fond: blanc;
}
- Définissez la propriété background-image css de votre image sur son attribut src :
$ ('. conteneur img'). each (fonction () {
$ (this) .css ('background-image', $ (this) .attr ('src'));
});
Avantage: vous n'avez pas besoin de changer votre marge
Inconvénient: parfois, appliquer une couleur de fond unie n’est pas une solution acceptable. C'est normalement pour moi.
Bien que cela ne soit pas spécifiquement limité au plugin cycle, cela peut aider les autres. Je suis tombé sur ce flux pour tenter de trouver une solution aux fichiers png transparents/translucides .animate (). J'ai eu la question d'une bordure noire survenant à la fois dans IE7 et IE8. Les images semblent bien jusqu'à ce que j'essaie d'utiliser JQuery pour animer l'opacité ...
$('#my-png-img').stop().animate({opacity:0.0},3000);
J'ai examiné plusieurs solutions et, malheureusement, aucune d'entre elles n'était idéale. Bien que ce flux soit un peu obsolète, il peut aider une autre personne qui cherche encore à rassembler une solution. J'ai fini par utiliser la solution Twin Helix ( http://www.twinhelix.com/css/iepngfix/ ) avec un brin de tweak. Je ne suis pas un grand fan des fichiers .htc, mais c'est sans intérêt. J'ai édité le fichier iepngfix.htc (~ ligne 75) pour intercepter IE7 et IE8. J'ai changé...
!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
à
!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||
De là, j'ai suivi les instructions générales (voir la démo), y compris l'ajout de ce bit à mon CSS
/* IE PNG Fix */
img, div, a, input {
behavior: url(/_css/iepngfix.htc)
}
De plus et comme d'autres l'ont mentionné, j'ai dû imbriquer mon image dans un conteneur ...
<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>
Ensuite, j'ai appliqué l'effet .animate () au div contenant. Un peu contraignant cependant, c’est la seule façon pour moi d’être en mesure d’évoluer au travail de façon constante. Dans un cas, j'ai même constaté que le problème de transparence affectait l'animation de l'opacité sur un fichier .gif transparent. Oh, et si j'ai utilisé .fadeIn () /. FadeOut plutôt que .animate () ne fait aucune différence.
La meilleure solution est unitpngfix .
Incluez-le dans votre script et assurez-vous de fournir le chemin d'accès à votre gif transparent 1px par 1px. Voila!