Problème de scrollbar horizontale sur un slider.

Fermé
lamontange Messages postés 133 Date d'inscription jeudi 3 décembre 2020 Statut Membre Dernière intervention 29 septembre 2023 - 21 mai 2022 à 20:30
 DoctorHow - 22 mai 2022 à 10:17
Bonsoir,
J'ai une scrollbar horizontale qui s'affiche quelques millisecondes lorsque le loader se lance. Un overflow: hidden ne change rien, ni un max-width.
Je suis bien incapable de résoudre cette énigme.
Je vous laisse les CSS :
#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("imgs/LoaderCarre.gif") no-repeat center center white;
        animation: fadeout 5s;
    -moz-animation: fadeout 5s; /* Firefox */
    -webkit-animation: fadeout 5s; /* Safari et Chrome */
    -o-animation: fadeout 5s; /* Opera */
}
@keyframes fadeout {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-moz-keyframes fadeout { /* sur Firefox */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-webkit-keyframes fadeout { /* sur Safari et Chrome */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}
@-o-keyframes fadeout { /* sur Opera */
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}

ainsi que le HTML placé avant le body et qui se résume à ça:
<div id="load"></div>


J'ai un autre souci (dois-je lancer une nouvelle discussion ?).
Mon loader ne prend pas en compte la durée (2 secondes, 4, 8 etc...). Tout se résume à environ 0.3 seconde.
Si vous pouviez m'aider ;)
Merci,
LM



Configuration: Macintosh / Chrome 101.0.4951.64
A voir également:

1 réponse

Salut, votre CSS est faux.
En effet ni overflow ni max-width n'a de rapport avec une animation CSS(sauf si c'est voulu mais ça me paraît compliqué pour une animation).
Essayez sans la propriété raccourcie "animation" donc avec "animation-duration" pour indiquer ...hmm la durée d'animation.

Explication ici:
https://www.w3schools.com/css/css3_animations.asp

Mieux vaut vous référer au manuel si vous avez un soucis pour vérifier votre code.


ps: par défaut la barre de défilement s'affiche quand le contenu dépasse de son container. Et c'est ce que semble faire votre animation donc les deux bugs sont probablement liés.
Si c'est le cas il faut sortir l'élément qui déborde du flux ou simplement vous débrouiller pour que ça ne dépasse pas(100% de la page si vous ne comptez pas les marges ou même avec les marges à 0 ça peut dépasser facilement).

ps2: ce que vous faites n'a rien à voir avec un "loader" la page charge normalement et une fois chargée lance l'animation. Il y a un ordre de chargement entre le CSS et le HTML et les autres éléments de la page(ex du JavaScript) mais comme cela se passe en un temps trop rapide pour l’œil humain ce n'est pas perceptible. La page joue une animation au démarrage simplement.
Pour vous assurer du chargement de la page il faudra passer par la programmation(JavaScript) qui peut vérifier l'état du chargement par exemple avec l'événement "onload" qui permet d'attendre qu'une page soit chargée pour commencer à effectuer le programme.
Sinon il y a le préchargement (pratique pour les fichiers d'images) et pour un chargement d'un élément spécifique il est possible de calculer le rapport poids total du fichier et poids chargé. Si le dernier est inférieur au premier alors le fichier est en cours de chargement et vous pouvez l'indiquer(ou faire le rapport entre les 2 pour faire une barre de progression du chargement en cours dans une boucle qui va vérifie à chaque tour de boucle la différence entre les 2).

Donc ce que vous faites est non seulement inutile mais ralentit d'autant de secondes d'animation l'accès à la page à l'utilisateur.
0