Scrollbar horizontale sur un loader.

**el_debutanti** · 22/05/2022, 11h16

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.
Supprimé le gif ne fait rien, réduire la taille du loader non plus.
Je suis bien incapable de résoudre cette énigme.
Je vous laisse les CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#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:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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, 15 etc...). Tout se résume à environ 0.8 seconde.
Si vous pouviez m'aider

Merci,
ED

**el_debutanti** · 22/05/2022, 11h22

quelque soit le loader (CSS, JS), j'ai une barre de défilement horizontale.
Même en mettant la div du loader après le <body>

Merci.

**two3d** · 22/05/2022, 14h55

Mets une capture stp.

à mon avis 0.8s équivaut à ce qu'il reste des 5s de fadout, depuis l'affichage de la page.

A la place de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
width: 100%;
height: 100%;

mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
top: 0;
bottom: 0;
left: 0;
right: 0;

**el_debutanti** · 22/05/2022, 22h31

Bonsoir two3d,
Merci pour ta réponse.
J'ai effectué ces modifications mais rien ne change. J'ai essayé avec d'autres loaders (avec d'autres CSS), le problème perdure, et est donc ailleurs.
Puis-je t'envoyer des CSS ou du HTML ? Si oui, lesquels ?
Bonne soirée,
ED

**two3d** · 22/05/2022, 23h01

Il nous faut tous les CSS utilisés sur la page où ya le problème stp.

**el_debutanti** · 23/05/2022, 10h26

Bonjour two3d,
J'y suis allé par élimination et le problème vient de ce HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
	<section id="section3" class="section">
 
		  <div class="parallax">
						<img src="imgs/bretelles@x2.jpg" alt="" data-parallax='{"y": 120}'/>
						<div id="parallax_bloc_deux"><h1>LDDC<br>
                        Style</h1><h2>Pose de modèles</h2></div></div>	
		<div id="iiSlider">
			<img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="./imgs/2359@2x.jpg" alt="Slide 1" />            
			<img data-src="./imgs/2364@2x.jpg" data-src-2x="./imgs/2364jpg" src="./imgs/2364@2x.jpg" alt="Slide 2" />   
            <img data-src="./imgs/IMG_6150@2x.JPG" data-src-2x="./imgs/IMG_6150.JPG" src="./imgs/IMG_6150@2x.JPG" alt="Slide 3" />         
			<img data-src="./imgs/DSC_2813@2x.jpg" data-src-2x="./imgs/DSC_2813.jpg" src="./imgs/DSC_2813@2x.jpg" alt="Slide 4" />
			<img data-src="./imgs/DSCN0051@2x.jpg" data-src-2x="./imgs/DSCN0051.jpg" src="./imgs/DSCN0051@2x.jpg" alt="Slide 5" />
			<img data-src="./imgs/DSCN0077@2x.jpg" data-src-2x="./imgs/DSCN0077.jpg" src="./imgs/DSCN0077@2x.jpg" alt="Slide 6" />
			<img data-src="./imgs/DSCN0091@2x.jpg" data-src-2x="./imgs/DSCN0091.jpg" src="./imgs/DSCN0091@2x.jpg" alt="Slide 7" />
			<img data-src="./imgs/IMG_0729@2x.JPG" data-src-2x="./imgs/IMG_0729.JPG" src="./imgs/IMG_0729@2x.JPG" alt="Slide 8" />            
            <img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="./imgs/2359@2x.jpg" alt="Slide 9" />
            <img data-src="./imgs/IMG_0996@2x.JPG" data-src-2x="./imgs/IMG_0996.JPG" src="./imgs/IMG_0996@2x.JPG" alt="Slide 10" />
            <img data-src="./imgs/IMG_2293@2x.JPG" data-src-2x="./imgs/IMG_2293.JPG" src="./imgs/IMG_0730@2x.jpg" alt="Slide 11" />
            <img data-src="./imgs/IMG_2403@2x.JPG" data-src-2x="./imgs/IMG_2403.JPG" src="./imgs/IMG_2403@2x.JP" alt="Slide 12" />
            <img data-src="./imgs/IMG_2374@2x.JPG" data-src-2x="./imgs/2359.jpg" src="./imgs/IMG_2374@2x" alt="Slide 13" />
            <img data-src="./imgs/IMG_2406@2x.JPG" data-src-2x="./imgs/IMG_2406.JPG" src="./imgs/IMG_2406@2x.JPG" alt="Slide 14" />
            <img data-src="./imgs/IMG_2480@2x.jpg" data-src-2x="./imgs/IMG_2480.jpg" src="./imgs/IMG_2480@2x.jpg" alt="Slide 15" />
            <img data-src="./imgs/IMG_6051@2x.JPG" data-src-2x="./imgs/IMG_6051.JPG" src="./imgs/IMG_6051@2x.JPG" alt="Slide 16" />
            <img data-src="./imgs/IMG_6056@2x.JPG" data-src-2x="./imgs/IMG_6056.JPG" src="./imgs/IMG_6056@2x.JPG" alt="Slide 17" />
            <img data-src="./imgs/IMG_6059@2x.JPG" data-src-2x="./imgs/IMG_6059.JPG" src="./imgs/IMG_6059@2x.JPG" alt="Slide 18" />
			<img data-src="./imgs/IMG_6060@2x.JPG" data-src-2x="./imgs/IMG_6060.JPG" src="./imgs/IMG_6060@2x.JPG" alt="Slide 19" />
			<img data-src="./imgs/IMG_6073@2x.JPG" data-src-2x="./imgs/IMG_6073.JPG" src="./imgs/IMG_6073@2x.JPG" alt="Slide 20" />
			<img data-src="./imgs/2359@2x.jpg" data-src-2x="./imgs/2359.jpg" src="./imgs/2359@2x.jpg" alt="Slide 21" />
			<img data-src="./imgs/IMG_6096@2x.jpg" data-src-2x="./imgs/IMG_6096.jpg" src="./imgs/IMG_6096@2x.jpg" alt="Slide 22" />
			<img data-src="./imgs/IMG_6138@2x.JPG" data-src-2x="./imgs/IMG_6138.JPG" src="./imgs/IMG_6138@2x.JPG" alt="Slide 23" />
             <img data-src="./imgs/IMG_0730@2x.jpg" data-src-2x="./imgs/IMG_0730.jpg" src="./imgs/IMG_0730@2x.jpg" alt="Slide24" />
		</div>
 
		<iframe class="video-iframe" src="https://www.youtube.com/embed/rZMCB33hJw0?&amp;=1&amp;loop=1&amp;playlist=rZMCB33hJw0" title="YouTube video player" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
 
		<a class="chevron-next scrollTo" href="#section4"><i class="fa fa-chevron-down fa-2x"></i></a>
 
	</section>

et de ces CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#section3 {
	background-color: #000;
	padding-bottom:120px;
	overflow-x: hidden;
 
}

Merci et bonne journée.

Scrollbar horizontale sur un loader.

CSS

Vue hybride

Discussions similaires

Partager

Partager