5569 sujets

Sémantique web et HTML

Problème d'ancre sur Chrome

Bonjour,

j'ai un phénomène étrange avec les ancres sur les mobiles SAMSUNG avec Chrome. Quand je presse sur le lien de l'ancre, on ne l'atteint pas directement, il faut appuyer plusieurs fois sur le lien pour y arriver. Plus l'ancre est loin, plus le nombre d'appuis augmente. Et ça ne le fait qu'à une nouvelle connexion. Après, ça fonctionne normalement, aussi bien en remontant dans la page qu'en descendant. Et le problème ne se pose pas avec les navigateurs en desktop, ni en mobile avec Firefox.
Voici le html d'une ancre, il y en a 6 (6 id avec des noms différents).
<div id="seve" class="fixed-bg bg-1-1" class="bckg-img">
et le lien pour y arriver 
<a href="#seve" title="Sève montante"><span class="menu2">sève</span></a>
Sans doute. Comme le problème ne se retrouve pas sur les forums, je vais chercher moi-même, ça me fera un bon exercice.
Bonjour,
ton intervention m'a poussé à revoir cette partie. Effectivement, il n'était pas nécessaire de rajouter une seconde fois "class", il suffisait de séparer chaque class par une espace, comme je l'avais fait pour les deux premières. J'ai corrigé. 
<div id="seve" class="fixed-bg bg-1-1 bckg-img">

J'utilise la troisième class pour le lazy load des images background css et cette partie ne fonctionne pas pour le moment, malgré ma correction. J'avais aussi commis une erreur sur la partie lazy load du background du css. Comme quoi des erreurs cumulées peuvent parfois ne pas empêcher un fonctionnement, ni être détectées au validateur.
Par contre, mettre deux ou trois class sur une div, je crois que c'est possible. Quelques exemples :
https://forum.alsacreations.com/topic-2-16810-1-Resolu-Peut-on-associer-plusieurs-class-a-un-element.html
http://pgoiffon.free.fr/info/inet/css_grp.php
https://www.bonbache.fr/appliquer-plusieurs-styles-css-dans-un-meme-element-html-50.html (Versla section "Cumul des styles")
Exemple dans Boostrap :
<form>
<div class="col-xs-6 form-group">

Si ce sont ces deux class dans une div qui posent le problème de l'ancre, il faut me le démontrer. Et me dire pourquoi ça fonctionne avec Firefox mobile et sur les desktop et pas sur Chrome mobile, ce qui était ma question initiale.
Modifié par Bongota (04 Feb 2021 - 10:17)
Administrateur
Jean-Pierre-Bruneau a écrit :
Bonjour, ce que tu montre est incroyable ! deux class pour un seul DIV ???


Hello,

Oui c'est extrêmement fréquent avec les frameworks à la mode tels que https://tailwindcss.com/ (mais ça existait déjà bien avant avec ce qu'on appelle les "CSS atomiques")

Par contre cette partie de code ne va pas fonctionner en effet : 
class="fixed-bg bg-1-1" class="bckg-img"

Car tu as deux fois le même attribut. Donc forcément l'un des deux ne sera pas pris en compte.

Je confirme qu'il faut l'écrire ainsi :
class="fixed-bg bg-1-1 bckg-img"


Bongota a écrit :
Et me dire pourquoi ça fonctionne avec Firefox mobile et sur les desktop et pas sur Chrome mobile

C'est contraire à tout standard HTML donc je suppose qu'il s'agit d'un bug spécifique des navigateurs, ou plutôt d'une permissivité trop grande.
Modifié par Raphael (04 Feb 2021 - 10:34)
Exact, j'avais corrigé entre temps. Merci à vous deux.
Et je mets bien mon id="seve" pour l'ancre dans la même class ?
Ça ne va toujours pas sur Chrome pour le moment avec les ancres, malgré la correction, mais c'est secondaire comme problème. Faire fonctionner le lazy load pour le background m'intéresse plus.
Sujet clos
Aller à