11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Bug Firefox scroll vers ancre

Bonjour

J'utilisais jusqu'ici Firefox 78esr car mon ordi ne supportait pas plus. Maintenant que j'en ai un neuf avec la dernière version de Firefox (v.88 mais aussi 87 et 86), je constate un bug sur la page de plombier que je gère pour mon frérot. https://monplombier27.fr/

La fonction slideDown de jQuery interfère, semble-t-il, avec le scroll vers une ancre dans la page. Le scroll ne se fait pas vers le bon endroit (voir menu en haut).

J'utilise pour le smooth-scrolling :
$('a[href^="#"]').click(function(){
	var the_id = $(this).attr("href");
	$('html, body').animate({
		scrollTop:$(the_id).offset().top -49
	}, 'slow');  
	return false;  
});

et pour l'apparition de la div :
function montrer(id) {
$(id).slideDown( "slow" );
}


Si l'une des deux fonctions est utilisées (ou les 2), le scroll ne se fait pas au bon endroit. Le problème n'a pas lieu avec Chrome ou Safari ni avec mon ancienne version 78 de FF.

Y'a-t-il une solution ? Je me passerais bien de jQuery mais il est utilisé pour d'autres fonctions et j'avais trouvé les animations meilleures qu'en JS.

Merci d'avance pour votre aide.
Modifié par kerlutinoec (02 May 2021 - 18:24)
Modérateur
Et l'eau,

Ce n'est pas jQuery qui est en faute. JQuery est une excellente librairie.
J'ai regardé ton site. Ton souci se situe au niveau de la compréhension du css et du flux de données.

Je vois aussi que le contenu de ton site est quasiment composé de <div><br>. Or l'HTML est un langage de contenu très riche. Smiley ohwell . Je ne vois pas pourquoi tu n'utilises pas sa richesse.

Pour finir, regarde du côté des flottants. C'est là que sa pêche.

ps : jette un oeil à ça
Modifié par niuxe (01 May 2021 - 12:16)
Salut, merci de t'intéresser à mon problème.

Je fais cela en amateur et bricole un peu en html. Bref je ne comprends pas toujours ce que je fais et compose par copier coller successifs de morceaux piochés de droite et de gauche.

Du coup pourrais tu être un peu plus explicite quant à mon problème et la manière de le résoudre ?

Les flottants c'est quand une div est en mode float je présume (?). Pourquoi posent-ils problèmes maintenant et pas avant, et qu'avec firefox ?

J'ai regardé le validator, ça ne parle pas de float. J'ai déjà corrigé beaucoup de chose avec par le passé ; ce qui reste ne m'a pas paru rédhibitoire.

Merci d'avance pour ton aide.
Modérateur
kerlutinoec a écrit :
Salut, merci de t'intéresser à mon problème.

Je fais cela en amateur et bricole un peu en html. Bref je ne comprends pas toujours ce que je fais et compose par copier coller successifs de morceaux piochés de droite et de gauche.


Copier/coller sans savoir ce que l'on fait, ce n'est pas du tout une bonne chose.

kerlutinoec a écrit :

Du coup pourrais tu être un peu plus explicite quant à mon problème et la manière de le résoudre ?

Les flottants c'est quand une div est en mode float je présume (?). Pourquoi posent-ils problèmes maintenant et pas avant, et qu'avec firefox ?


notion de flux en css
Guide de survie du positionnement CSS

kerlutinoec a écrit :

J'ai regardé le validator, ça ne parle pas de float. J'ai déjà corrigé beaucoup de chose avec par le passé ; ce qui reste ne m'a pas paru rédhibitoire.


C'est un autre souci et ça peut influencer le rendu de la page.
Modifié par niuxe (01 May 2021 - 16:34)
Salut

J'ai lu tes deux liens. Je pense avoir compris l'essentiel... mais peut être pas les subtilités car je me suis souvent retrouvé à me demander pourquoi ma mise en page était pourrie.
Pour le moment je privilégie de rester dans le flux des div successives sauf quand j'ai besoin de superposer du texte sur une image ou de faire deux colonnes comme en bas.

Sont-ce ces deux colonnes du bas en float qui posent problèmes ?
Ou les images flottantes dans les divs blanches que je cherche à afficher ?

Tes aiguillages ne sont pas suffisamment clairs pour moi. Désolé.
Salut

J'ai renommé le titre car le bug n'est pas spécifique à jQuery mais plus général avec javascript.
J'ai fait quelques tests :
- Si je désactive totalement javascript (about:config) dans Firefox (en laissant les divs visibles), il n'y a plus de problème de zone de scroll (même en smooth-scrolling).
- Si je remplace l'animation jQuery
$(id).slideDown( "slow" );

par un simple 
document.getElementById('infos1').style.display='block';

sans aucune animation, le problème demeure (même sans smooth scrolling).
jQuery est donc effectivement disculpé.
- Si je désactive tous les javascripts en fin de code, le scroll reste perturbé pour le post-it déjà visible, seulement si j'utilise le smooth-scrolling natif (là ça devient très bizarre) et pas sans smooth-scolling.

Si quelqu'un pouvait me pointer précisément l'élément qui pose problème cela me ferait gagner du temps car là je ne trouve pas.

J'en suis à me demander si je ne fais pas essayer de faire cela en pure CSS.
ÇA Y EST J'AI TROUVÉ !

Bon apparemment ça ne semble pas avoir de lien avec javascript... et pourtant.

Ça ne semble pas non plus avoir de lien avec des "flottants" (à moins que je n'ai pas compris ce qui était appelé un "flottant")...


Tout ce merdier était dû à l'activation du lazy loading natif (loading="lazy") sur les images.
Du coup lors du scroll vers une ancre (même sans JS), les images des zones "survolées" étaient chargées, décalant ainsi la zone d'arrivée. (C'est mon explication.)
J'ai viré tous les lazy loading pour les images au dessus des points de scroll et tout remarche !


Je ne m'explique toujours pas pourquoi
- Chrome ou Firefox 78esr plus ancien (qui gèrent le lazy loading) ne sont pas touchés par ce problème,
et surtout pourquoi
- La désactivation du javascript dans firefox fait disparaitre le problème !! (mais pas la simple suppression de tous les JS de ma page)
Modifié par kerlutinoec (17 May 2021 - 10:03)
Meilleure solution
Sujet clos
Aller à