28172 sujets

CSS et mise en forme, CSS3

Diaporama pur CSS qui ne fonctionne pas bien avec Firefox

Bonjour,
J'essaie de me créer un petit diaporama de 3 images en pur CSS, avec des fondus.
Avec Chrome, ça fonctionne très bien, mais avec Firefox, l'animation n'est pas propre, parfois les fondus ne sont pas réguliers, parfois on voit la fin de la translation de mon "slideshow" alors que l'opacité n'est pas à 0...
Quelqu'un aurait-il une idée d'où cela peut venir ?
Merci par avance Smiley smile

Voici mon code HTML :

<div class="diapo">
   <div class="slideshow">
      <img class="slide" src="images/1.png">
      <img class="slide" src="images/2.png">
      <img class="slide" src="images/3.png">
   </div>
</div>

et mon code CSS :

.diapo {
   max-width: 30%;
   overflow: hidden;
}

.slideshow {
   display: flex;
   animation: translate infinite 12s;
}

.slide {
   flex: 0 0 100%;
   animation: fadeInOut ease-in-out infinite 4s;
}

@keyframes translate {
   0%, 33.33% {transform:translateX(0);}
   33.34%, 66.66% {transform:translateX(-100%);}
   66.67%, 100% {transform:translateX(-200%);}
 }

@keyframes fadeInOut {
   10%, 90% {opacity:1;}
   0%, 100% {opacity:0;}
}

Modifié par miaoumix75 (22 Jun 2024 - 22:47)
Modérateur
Salut,

C'est l'overflow hidden qui te met le bazarre (classique). Ensuite, opacity 0 demande trop de calcul (classique). Passe-le en opacity 0.2. Je pense aussi que le transform demande beaucoup. Tu verras qu'il y a un mauvais effet sur la gauche (un bout d'image). Regarde peut-être du côté de clip path (en espérant que tu n'aies pas encore ce le même bug avec l'overflow hidden. Peut-être que si ça ne passe pas, la pseudo class :before t'aidera à masquer ce bout d'image à gauche (quitte à tricher). Aussi, tu peux simplifier le code (j'ai fait ça rapide). wrap n'est peut être pas indispensable. Au passage, j'ai shooté ton easin (calcul superflu pour de l'opacité). À noter qu'un <ul> aurait été plus approprié puisque c'est une liste d''images et l'attribut alt ainsi que sa valeur ne sont jamais du luxe pour un slideshow dans ce contexte Smiley cligne

Jette un oeil à ceci : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
.wrap{
    position: relative;
}
.wrap:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 30%;
    background: #fff;
}
.diapo {
    max-width: 30%;
}

.slideshow {
    display: flex;
    animation: translate infinite 12s;
}

.slide {
    flex: 0 0 100%;
    animation: fadeInOut infinite 4000ms;
}

@keyframes translate {
   0%, 33.33% {transform:translateX(0);}
   33.34%, 66.66% {transform:translateX(-100%);}
   66.67%, 100% {transform:translateX(-200%);}
}

@keyframes fadeInOut {
    0%{opacity: 0.2;}
    10%{opacity: 1;}
    90%{opacity: 1;}
    100%{opacity: 0.2;}
}

    </style>
    <body>
        <div class="wrap">
            <div class="diapo">
                <div class="slideshow">
                    <img class="slide" src="https://picsum.photos/id/13/200/300" alt="">
                    <img class="slide" src="https://picsum.photos/id/16/200/300" alt="">
                    <img class="slide" src="https://picsum.photos/id/17/200/300" alt="">
                </div>
            </div>
        </div>
    </body>
</html>

Modifié par niuxe (23 Jun 2024 - 03:07)
Bonjour Niuxe,
Merci pour ta réponse Smiley smile
Je ne peux malheureusement pas trop appliquer ta méthode par rapport à la structure et au contenu de mon site.
J'ai réglé l'opacity à 0.2 et j'ai viré le easin, mais ça n'a rien changé.
Ce qui est étrange, c'est que j'ai déjà utilisé mon code sur un autre site avec un diaporama dont le contenu est plus complexe, et ça fonctionne très bien, malgré l'overflow-hidden.
Je vais encore chercher Smiley biggrin
Bonne journée !
Modérateur
niuxe a écrit :
Salut,
...
Regarde peut-être du côté de clip path
...

C'est probablement la solution la plus simple et en gardant le overflow:hidden;

Le bug semble inconsistant avec transform et overflow dans firefox,
* un redimensionnement , scroll de la fenêtre le fait apparaitre ou disparaitre
* selon la largeur de la fenêtre, idem bug ou pas bug !?

Avec une transition sur une marge négative le bug est évité.
Pas tester avec un text-indent négatif ou position:relative + coordonnées, mais cela est surement aussi dénué de bug bien que moins classique comme méthode de déplacement Smiley smile

pour jouer avec: test en clip-path et marge négative. https://codepen.io/gc-nomade/pen/yLWjXGj

upload/1719142266-2857-trbugffovfl.png

cdt
Modifié par gcyrillus (23 Jun 2024 - 13:31)
Meilleure solution
salut
en faisant simple çà fonctionne partout:

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style>
body {
	background-color: #fed;
   margin: 0;
}
.diapo {
   max-width: 30%;
}
.slide1, .slide2, .slide3 {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   animation: fade infinite 12s;
}
.slide1 {
animation-delay: 0s;
}
.slide2 {
animation-delay: 4s;
}
.slide3 {
animation-delay: 8s;
}
@keyframes fade {
   0%   {opacity:0;}
   3%   {opacity:1;}
   30%  {opacity:1;}
   33%  {opacity:0;}
   100% {opacity:0;}
}
</style>
</head>
<body>
<div class="diapo">
   <img class="slide1" src="images/1.png">
   <img class="slide2" src="images/2.png">
   <img class="slide3" src="images/3.png">   
</div>
</body>
</html>
niuxe a écrit :
As tu essayé en local ce que je t'ai envoyé ?

Oui, j'ai essayé, mais les images en position absolute, ça ne collait pas avec mon site, j'avais besoin que ça reste dans le flux de ma page Smiley smile
drphilgood a écrit :
salut
en faisant simple çà fonctionne partout:

Merci, mais je ne voulais pas utiliser de position absolute pour mes images Smiley smile
Modifié par miaoumix75 (23 Jun 2024 - 21:28)
gcyrillus a écrit :

C'est probablement la solution la plus simple et en gardant le overflow:hidden;

Le bug semble inconsistant avec transform et overflow dans firefox,
* un redimensionnement , scroll de la fenêtre le fait apparaitre ou disparaitre
* selon la largeur de la fenêtre, idem bug ou pas bug !?

Avec une transition sur une marge négative le bug est évité.
Pas tester avec un text-indent négatif ou position:relative + coordonnées, mais cela est surement aussi dénué de bug bien que moins classique comme méthode de déplacement Smiley smile

pour jouer avec: test en clip-path et marge négative. https://codepen.io/gc-nomade/pen/yLWjXGj

upload/1719142266-2857-trbugffovfl.png

cdt

Merci beaucoup gcyrillus pour ces astuces et le code Smiley biggrin
Effectivement, avec le clip-path et la marge négative, le problème est résolu.
Drôle de bug ! Je ne saurai jamais pourquoi je n'ai pas rencontré ce problème sur un autre site avec quasiment le même diaporama ! Les mystères de Firefox ...
Prévenir un modérateur
Répondre au sujet
Aller à