5546 sujets

Sémantique web et HTML

Les liens vers les ancres d'un texte sont décalés sur Firefox

Bonjour,

J'ai un site web avec un sommaire et différents chapitres.

J'utilise les balises <a id=#SOM-XX" href="#XX"> et <a id="XX" href="#SOM-XX"> pour permettre aux utilisateurs de faire le va-et-vient entre les titres du sommaire et les chapitres et sous-chapitres. Jusqu'à il y a peu cela fonctionnait bien.

Depuis une date indéterminée, sur Firefox, après un premier va-et-vien entre sommaire et chapitres, les liens depuis le sommaire ne renvoient pas exactement au chapitre concerné, mais légèrement plus haut... Smiley rolleyes
Le phénomène s'amplifie à mesure que l'on choisit un chapitre proche de la fin, par exemple le 5e.

Essayez par vous-mêmes: https://blog.patrick-kiri.mq/2019/02/connaissances-et-orientations-patrick_15.html#lapasfc

En revanche, tout fonctionne normalement sur Chrome.

Comment corriger ce problème ?
Modérateur
Salut,

de mon côté, je n'ai pas ce souci.

os/distribution : SLED
bureau : Gnome 3.34
firefox : 102esr
Modifié par niuxe (07 Dec 2022 - 14:42)
De mon côté le problème se pose sur:
- Windows 10, Firefox 107.0.1
- Android 8.1.0, Firefox 107.2.0

Smiley confus
Modérateur
Là, je suis passé sur mon win10. En effet, tu as bien un souci.

Peux tu me dire comment est géré ton système ? Il y a du JS ? C'est quoi ? Une librairie téléchargée ou un script que tu as fait ?
Exact, j'ai aussi ce problème, que j'ai abandonné à tenter de résoudre. J'en avais parlé ici il y a quelques mois.
Je ne sais pas si le layzyload natif de certains navigateurs apporte le même genre de problème.
niuxe a écrit :
Là, je suis passé sur mon win10. En effet, tu as bien un souci.

Peux tu me dire comment est géré ton système ? Il y a du JS ? C'est quoi ? Une librairie téléchargée ou un script que tu as fait ?


Bonjour et merci pour ton aide. C'est un blog Blogger avec le template "Notable" il me semble.
Alors j'ai réussi à régler le problème en combinant le comportement normal (d'où le " //e.preventDefault(); ") avec du javascript; ça fonctionne sur Firefox/Chrome Windows/Android 8; si vous pouviez me faire des retour sur les autres plateformes Smiley ravi

Les autres lignes en commentaire ne règlent pas le problème.



(() => {
  document.querySelectorAll('a[href^="#"]').forEach((elem) => {
    elem.addEventListener('click', (e) => {
      //e.preventDefault();          
      // location.href = elem.getAttribute('href');
      
      var h = elem.getAttribute('href').replace('#', '');
         
      //var top = document.getElementById(h).offsetTop; //Getting Y of target element
      //window.scrollTo(0, top); 

      document.getElementById(h).scrollIntoView(); 

    });
  });
})()


https://stackoverflow.com/questions/68467475/lazy-loading-conflicting-with-scrollto-anchor-to-id-scroll-stops-halfway-throu
https://stackoverflow.com/questions/13735912/anchor-jumping-by-using-javascript
Modifié par negtrick (08 Dec 2022 - 17:18)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à