5545 sujets

Sémantique web et HTML

Ancre pas précise

Bonjour,

j'ai un site one page sur lequel j'ai un menu hamburger, afin de naviguer directement à certains points de la page. J'ai remarqué que sur un mobile, un appui sur un lien n'envoyait pas toujours directement sur le point visé par le lien, mais à d'autres endroits de la page. Le phénomène se produit de façon aléatoire et particulièrement quand on descend sur la page, pas quand on remonte. Le menu est tout à fait ordinaire ul et li mais j'utilise des ancres dans la page. Ce sont le mêmes ancres que j'utilise en mode desktop, avec un autre menu, mais en ligne. En mode desktop, il n'y a pas de problèmes. Je n'ai testé que sur mobile SAMSUNG Android.

Voici quelques lignes de ce menu :
<li> <a href="#popin1" title="Biographie de l'auteur">Biographie</a>
			<li> <a href="#goni">N'goni</a>
			<li> <a href="#seve">Sève montante</a>
			.........

Une ancre :
<div id="goni" class="fixed-bg bg-1-1">
      <a class="button-top" href="#" role="button" title="Retour haut">&#8593;</a>
        <div class="text-box">
        <h3 class="stitre">Goni</h3>
        .......

S'il n'y a pas assez d'informations, je mettrai le lien du site.
Merci pour l'aide.

ps : serais-ce le fait d'avoir plusieurs id d'ancres sur la page ? Elles ont pourtant toutes un nom différent.
Modifié par Bongota (07 Apr 2022 - 13:32)
J'ai déjà eu ce problème : il était dû au lazy loading des images situées entre le point de départ et le point d'arrivée, qui en se chargeant lors du smooth scrolling, décalent le point d'arrivée calculé initialement.

Ca ne le fait pas dans l'autre sens car tu as scrollé et fait apparaitre les images manquantes.

J'ai alors décidé d'enlever les lazy loading situés jusqu'à ces points. (Si tu as plusieurs images cotes à cotes tu peux ne l'enlever que sur une seule -la plus haute s'il y a des différences de hauteur-)...
PS : certains navigateurs mobiles forcent peut être le lazy loading

Si ton menu utilise du javascript, tu peux recaler la div au bon endroit après scroll avec un 
setTimeout(() => { location.hash = "#" + id; }, 1000);


Je ne sais pas si un loading="eager" suffirait (?).
Bien ta réponse, je n'avais jamais entendu parler de ce problème.
En effet, j'utilise le lazyload sur le site, c'est même l'un des éléments de ce site. Je me vois mal le supprimer. D'autant plus que le lazyload se conçoit très bien sur un site on page et que s'en passer, c'est alourdir considérablement le temps de chargement.
Merci pour l'info.
kerlutinoec a écrit :
PS : certains navigateurs mobiles forcent peut être le lazy loading

Si ton menu utilise du javascript, tu peux recaler la div au bon endroit après scroll avec un 
setTimeout(() =&gt; { location.hash = "#" + id; }, 1000);

(enlevé ce texte que ma souris avait mis par erreur !!!)
Je ne sais pas si un loading="eager" suffirait (?).


Le lazyload que j'utilise est fait avec interception observer et un JavaScript adapté. Je ne peux pas utiliser "eager". Mon menu n'est pas en JavaScript non plus.

En tous cas, ce n'est pas un problème énorme, en mobiles, les visiteurs vont plutôt utiliser le scroll au doigt.
Modifié par Bongota (07 Apr 2022 - 15:08)
Bongota a écrit :
Bien ta réponse, je n'avais jamais entendu parler de ce problème.
En effet, j'utilise le lazyload sur le site, c'est même l'un des éléments de ce site. Je me vois mal le supprimer. D'autant plus que le lazyload se conçoit très bien sur un site on page et que s'en passer, c'est alourdir considérablement le temps de chargement.
Merci pour l'info.


Pas forcément si tu fais charger tes images par un script en defer.

Quant à ton lazy load par intersection observer je présume qu'il a un role visuel. Les images peuvent être donc chargées mais masquées et apparaitre au scroll par intersection observer.
kerlutinoec a écrit :


Pas forcément si tu fais charger tes images par un script en defer.

Quant à ton lazy load par intersection observer je présume qu'il a un role visuel. Les images peuvent être donc chargées mais masquées et apparaitre au scroll par intersection observer.


Dans ton script chargé en defer, tu mets un truc dans ce genre :
function init() {
const heavyDefer = document.querySelectorAll("img");
for (var i=0; i<heavyDefer.length; i++) {
	if (heavyDefer[i].getAttribute('data-src')) {
		heavyDefer[i].setAttribute('src',heavyDefer[i].getAttribute('data-src'));
}}}
window.onload = init;

Modifié par kerlutinoec (07 Apr 2022 - 14:38)
Le rôle de mon layzyload est visuel mais surtout, il allège considérablement le poids de la page au chargement.
Les images ne sont pas chargées et masquées, elle ne sont pas chargées du tout, tant que l'on ne descend pas sur la page. Le lazy load ne charge que l'image ou les images qui sont au-dessus de la ligne de flottaison.
La limite du déclenchement est réglable par "rootMargin:'0px 0px 100px 0px" situé dans le JavaScript associé.
C'est là que l'on définit le seuil de chargement de l'image suivante. C'est un peu la décision du concepteur, en fonction de l'ergonomie du site. On s'arrange pour prendre un peu d'avance, de façon à ne pas avoir d'apparitions brusques d'images.
C'est un peu ce qui est reproché au lazyload natif des tous nouveaux navigateurs. Il semble que ce fameux seuil est fixé et pas réglable (à confirmer).
Je viens d'effectuer de nouveaux tests sur mobile. Quand on descend sur la page avec le menu mais vers l'ancre suivante, il n'y a pas de problème. C'est quand on saute une ou deux ancres que le décalage commence à apparaître.
Bongota a écrit :
Le rôle de mon layzyload est visuel mais surtout, il allège considérablement le poids de la page au chargement.
Les images ne sont pas chargées et masquées, elle ne sont pas chargées du tout, tant que l'on ne descend pas sur la page. Le lazy load ne charge que l'image ou les images qui sont au-dessus de la ligne de flottaison.
La limite du déclenchement est réglable par "rootMargin:'0px 0px 100px 0px" situé dans le JavaScript associé.
C'est là que l'on définit le seuil de chargement de l'image suivante. C'est un peu la décision du concepteur, en fonction de l'ergonomie du site. On s'arrange pour prendre un peu d'avance, de façon à ne pas avoir d'apparitions brusques d'images.
C'est un peu ce qui est reproché au lazyload natif des tous nouveaux navigateurs. Il semble que ce fameux seuil est fixé et pas réglable (à confirmer).
Je viens d'effectuer de nouveaux tests sur mobile. Quand on descend sur la page avec le menu mais vers l'ancre suivante, il n'y a pas de problème. C'est quand on saute une ou deux ancres que le décalage commence à apparaître.


En fait ça dépend si tu veux alléger (lazy loading) pour économiser de la data à ceux qui n'irait pas plus loin (auquel cas reste comme ça), ou si tu veux alléger pour que la page s'affiche plus vite. Ma proposition permet ce second cas : page affichée vite au premier chargement puis le script *en defer* charge les images manquantes pendant que le visiteur lit le début.
C'est une proposition qui se tient, je vais me pencher dessus.
Avec intersection observer, j'allège la page aussi bien pour ceux qui n'iront pas plus loin que pour ceux qui vont regarder tout le site, puisqu'on charge les images au fur et à mesure du scroll.
Il faut aussi ternir compte des visiteurs qui vont aller directement sur un endroit précis de la page, parce qu'ils ont trouvé le mot clé sur un moteur tde recherche. Là, le lazyload ne sert plus à rien, tout du moins pour ce point précis.
Je dois avouer que j'ai aussi sur le même site un JavaScript qui fait apparaître les div au scroll de la page. Ça fait beaucoup, mais le site est très véloce, malgré tout. Peut-être qu'il y a aussi un problème ici avec le menu.
Salut,

je reviens sur mon problème.
Je ne comprends pas pourquoi, comme tu le dis, le lazyload aurait de l'influence sur l'ancre et pourquoi les images qui se chargent au cours du scroll décaleraient le point d'arrivée de l'ancre. J'ai placé des images placeholder partout pour remplacer les vraies images, en attendant. Et ces images fictives possèdent les mêmes dimensions que celles qui vont être téléchargées. De ce fait, il n'y a pas de déplacement de contenu lorsque les images se mettent en place.
Et pourquoi l'effet indésirable ne se produit pas en mode desktop ?
Bongota a écrit :
Salut,

je reviens sur mon problème.
Je ne comprends pas pourquoi, comme tu le dis, le lazyload aurait de l'influence sur l'ancre et pourquoi les images qui se chargent au cours du scroll décaleraient le point d'arrivée de l'ancre. J'ai placé des images placeholder partout pour remplacer les vraies images, en attendant. Et ces images fictives possèdent les mêmes dimensions que celles qui vont être téléchargées. De ce fait, il n'y a pas de déplacement de contenu lorsque les images se mettent en place.
Et pourquoi l'effet indésirable ne se produit pas en mode desktop ?


Je pense (mais je peux me tromper) que ton navigateur mobile fait du lazy loading forcé (d'où la différence avec la version desktop). Et dans ce cas il le fait aussi sur les images 'placeholder'...
Si c'est la raison, tente peut être le loading="eager" ou le prefetch des images 'placeholder'.
C'est quoi ce navigateur mobile ? Un truc standard (chrome/firefox) ou un truc samsung ?
Modifié par kerlutinoec (08 Apr 2022 - 10:30)
Salut,

Mon navigateur : Chrome sur mobile SAMSUNG Galaxy S6 Android.
Je viens de tester sur un Apple iPhone 7 et là, tout fonctionne correctement. Ce serait alors Chrome ou SAMNSUNG ?
J'aime bien ces problèmes css un peu mystérieux, je cherche toujours à les résoudre Smiley biggrin
Bongota a écrit :
Salut,

Mon navigateur : Chrome sur mobile SAMSUNG Galaxy S6 Android.
Je viens de tester sur un Apple iPhone 7 et là, tout fonctionne correctement. Ce serait alors Chrome ou SAMNSUNG ?
J'aime bien ces problèmes css un peu mystérieux, je cherche toujours à les résoudre Smiley biggrin


Je viens de trouver ça : https://stackoverflow.com/questions/65334111/bypass-chrome-android-lite-mode-lazy-loading-force-eager-loading-to-full-we

Chrome en mode Lite semble faire du lazy loading forcé par exemple.
J'ai lu, le problème est donc avec Chrome. Il faut que je détermine sur combien d'appareils ceci se produit, afin de voir si ça vaut le coup d'agir.
En mode mobile, plus de la moitié des visiteurs vont descendre sur la page au doigt. Mon menu hamdburger n'apparaît d'ailleurs que quand on remonte sur la page, sinon, il s'efface.
L'élément principal et indispensable de ce menu, c'est une biographie et là, elle s'ouvre correctement, quel que soit l'endroit de la page. Il en est de même pour un lien extérieur vers un blog.

Merci, en tous cas.
Sujet clos
Aller à