Mon panier se comporte bizarrement sous firefox

Bonjour a tous

je pensais que mes ennuis étaient résolus
Mais ce matin lors d'essais je me suis aperçu en testant mon panier avec soit firefox développement ou le traditionnel

Que lorsque on clic au niveau de la perle 2001 sur le bouton remise détail et qu'ensuite on ferme le pop up que les colonnes étaient encrassée a gauche ...

Je vous donne le lien afin de savoir si vous avez le même phénomène

Pourtant j'ai bien regarder mes balises sont bien toutes fermées

A première vue cela provient de mon panier flottant en haut a droite ,
lorsque je supprime cette class position: sticky;
le phénomène ne se reproduit plus mais le panier est a gauche

https://phil.pecheperle.be/panier/index20.php

y a toujours bien un truc pour embeter son monde
Modifié par flexi2202 (31 Jan 2022 - 14:58)

Bonjour,

Juste pour pas qu'on oublie d'où on vient, il y a 14 jours et quelques dizaines de posts avant aujourd'hui ...

flexi2202 a écrit :
je me retrouve devant une dernière difficulté

...

parsimonhi a écrit :
Ça m'étonnerait que ce soit la dernière !

...

flexi2202 a écrit :
En principe si cela est la dernière petite chose a régler du moins pour ce projet. Je ne vois pas ce que je pourrais ajouter encore a ce prjet mdrrrr

Plus sérieusement, là, je ne vois pas le problème. Je clique sur le lien "Détail remise", un popup apparait, je clique sur "OK" et ça revient dans l'état dans lequel c'était avant de faire apparaitre le popup. C'est quoi le problème en fait (je ne comprends pas bien la phrase qui décrit le problème) ?

Amicalement,

bonsoir

Merci pour l'aide
Je pensais vraiment que cette fois cela était fini
Mais non
Lorsque je clic sur "detail remise voici ce qui ce passe

https://zupimages.net/up/22/05/z1ae.jpg

après avoir cliquer sur ok et remonter la page
voici ce que j'ai

https://zupimages.net/up/22/05/wet8.jpg

que sur firefox
apparemment firefox cela allergique a cette class position: sticky;

Amicalement

Bonjour,

J'ai fini par le voir sur firefox effectivement mais pas sur les autres navigateurs.

Règle de parsimonhi N°34 : "Si tu arrives à te servir de la propriété css position:sticky dans une page où il y a plus que 2 balises html, cours demander une augmentation à ton patron."

Bon, c'est le truc vraiment difficile à corriger, parce qu'il n'y a probablement pas d'erreur dans ton code, mais simplement un bug firefox. Il faudrait faire une page de test qui contient tout ce qu'il y a dans ta page, puis retirer les éléments un à un et re-tester à chaque fois jusqu'au moment où le bug ne sera plus visible, de manière à obtenir un code minimal reproduisant l'erreur. Alors ce sera peut-être possible de trouver un contournement (ou une maladresse dans le code, ce qui n'est pas à exclure).

Amicalement,

Bonjour

Merci pour la réponse et l explication
Cela fesait déjà un petit moment que j'avais remarqué que des fois mes colonnes de perles partaient a gauche Sans raisons
Au début je pensais que cela était du à une div mal fermées...
En fait cela ce produit a chaque fois que je clic sur détail remise
Peut être que la fonction que j'ai récupéré d'un autre poste et que j'ai modifié en serais là cause ?
J'en doute puisque aucune erreur dans la console ,cela aurait été trop facile

Je me suis aussi documenté et cette
position:sticky est incompatible avec firefox
D ailleurs lorsque je retire position:sticky
Le phénomène n'est plus présent

Tu peux faire le test avec f12

Je vais poster le code de détail remise
On ne sait jamais
Que tu verrais le petit détail

Amicalement

voici donc la fonction du détail remise

				<script type="text/javascript">
function fermeMaJolieAlertnonreguliere(event) {
  event.target.parentNode.parentNode.remove();
}

function ouvreMaJolieAlertnonreguliere(event, m) {
  function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
  }
  let e = document.createElement('div');
  let s = "";
  e.classList.add("maJolieAlertnonreguliere");
   s += '<div><p>' + m + '</p>';
   s += '<p>';
   s += "Ces perles ne sont pas régulières";
    s += "<br>";
   s += " de grosses différences peuvent apparaitre";
   s += "<br>";
    s += "au niveau de la hauteur ";
    s += "<br>";
    s += "également des fois au niveau  ";
    s += "<br>";
    s += "diamètre";
    s += "</p>";
      s += '<button type="button" onclick="fermeMaJolieAlertnonreguliere(event)">OK</button></div>';
     e.innerHTML = s;
  insertAfter(e, event.target);
}

Bonjour,

Normalement, on peut se servir de position:sticky avec firefox, au bug près.

Je ne pense pas que ce soit dans ce code des alertes en lui-même, le problème. C'est tout ce qu'il y a dans la page. Le mauvais coup peut venir de n'importe où.

Je pense que je serai terrorisé si on m'obligeait à utiliser toutes ces librairies js !

Il te sert à quoi bootstrap en fin de compte ?

Amicalement,
Modifié par parsimonhi (01 Feb 2022 - 02:08)

Bonjour,

Je viens de regarder un peu plus en détail ton code html. J'ai une bonne et une mauvaise nouvelle. La bonne c'est qu'il y a des erreurs. Et la mauvaise, c'est qu'il y en a une qui va te faire souffir.

Alors, pour l'instant, j'ai vu que :
1) Il manque un espace juste après tous les onchange="changeQte(this);" (probablement sans conséquence, mais il faut corriger)
2) Il y a en fin de code une balise fermante </script> qui suit une balise fermante </script> (probablement sans conséquence aussi, mais il faut corriger)
3) Il y a quelque part des <div> en trop ou en moins parce que mon éditeur de code n'arrive pas à "replier" toutes les balises <div> (et c'est cette erreur là qui va te faire souffrir, parce que des <div>, c'est pas ça qui manque dans ton code ! ).

EDIT: j'ai finalement trouvé après avoir pas mal cherché que ça ne "repliait" pas parce qu'il trainait une balise <alert> aux alentours de la ligne 11800 (dans le code html de la perle 4005). Il faut évidemment la supprimer. Maintenant, j'arrive à replier le code entièrement, donc c'est déjà ça. Par contre le sticky-bug dans firefox est toujours là.

Amicalement,
Modifié par parsimonhi (01 Feb 2022 - 01:40)

bonjour

Merci pour le temps consacre a corriger mon code
Je vais déjà te répondre a deux questions
Je pense que je serai terrorisé si on m'obligeait à utiliser toutes ces librairies js ! Smiley cligne
Ben disons qu'il y a juste celle de boostrap et pour la light box

Il te sert à quoi bootstrap en fin de compte ?
Ah cela est la bonne question
en fait des le début ce code que j'ai trouvé était enveloppé par boostrap

Alors après avoir cherche encore et encore
Je viens de trouver ce qui ne fonctionnait pas
C'est encore une fois de la faute de hostinger
des fois lorsque j'enregistre le fichier , il ne l'enregistre pas
et donc du coup dans le css les valeurs pour le code des divs qui se rencontre étaient mauvais
Je ne sais pas par quel miracle la div disparaissait lorsqu'elle rencontrait l'autre
puisqu'ils fonctionnaient avec le code d'un précèdent essai

j'ai du reprendre tout depuis le départ

Pour ce qui est de alert je l'avais corrigé mais pas dans la version envoyée (désolé du temps perdu )

Bon a présent je continue mes essais ...

Encore mille fois merci

Amicalement
Modifié par flexi2202 (01 Feb 2022 - 11:09)