Discussion :

[Danyel]

Salut all,
J'ai un probleme que je n'arrive a regler malgres toutes mes tentatives et recherches.
C'est un melange de css et js pour un effet de resize d'une image lors d'un scroll (assez classique)
Tout fonctionne parfaitement sur ordi (et meme sur emulateurs de mobiles) mais pas directement sur mobile avec les navigateurs chrome et samsung.

J'utilise le js pour la gestion de l'effet en css

Code javascript :

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

1
2
document.getElementById("lelogo").classList.remove("lelogo-size");
document.getElementById("lelogo").classList.add("lelogo-size-reduit");

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
#lelogo {
    width: 175px;
}
.lelogo-size {
    width: 175px !important;
}
.lelogo-size-reduit {
    width: 85px !important;
}
 
@media only screen and (max-width:650px) {
 
#lelogo {
    width: 175px;
}
.lelogo-size {
    width: 175px !important;
}
.lelogo-size-reduit {
    width: 85px !important;
}
 
}

Alors le probleme est que l'effet de resize ne fonctionne pas sur les mobiles alors qu'il fonctionne sur les ordi et que c'est le meme code.
Ou est le probleme ou l'erreur ???
Merci par avance pour votre aide et resolution.

[Archimède]

Ton souci est sans doute au niveau du scroll tactile en js...
Regarde ici peut-être :
https://www.developpez.net/forums/d1...le-javascript/

[Danyel]

Non car le scroll fonctionne bien sur le mobile.
J'ai essaye avec un resize d'un div a partir du js avec la meme methode et ca fonctionne nickel (meme sur mobile !!!)
C'est uniquement pour le resize sur une image (meme sur toutes en fait) avec cette methode et je vois pas pourquoi.
En tous cas, merci Archimède.

[unanonyme]

j'essayerais de supprimer les !important

c'est souvent pratique, ça résulte souvent en un ajout de complexité qui rajoute à la difficulté.

il y a des règles de précédence lors de l'application des règles de style, c'est mieux d'essayer de les respecter que de court circuiter le système.

[Danyel]

j'essayerais de supprimer les !important

Si j'enleve les !important, les classList.xxx du js ne fonctionnent plus du tout.

[Doksuri]

le !important est a proscrire... il n'est util que pour ecraser des proprietes d'une lib par exemple.

il faut que tu revois tes selecteurs : tu as surement un probleme de "poids" de selecteur developer.mozilla.org/en-US/docs/Web/CSS/Specificity#selector_weight_categories (la doc en francais n'affiche pas la section des poids...)

il faut que tu refasses ton css sans !important