[Résolu] Bug Google Chrome Position: Sticky

Bonjour,

J'ai un problème avec Google Chrome. En effet, j'ai créé un tableau qui est assez long et par conséquent j'ai mis une barre de navigation horizontale sur celui-ci. Je voulais faire en sorte que la première colonne de mon tableau soit toujours visible, et pour cela j'ai utilisé Position: Sticky.

Sur Firefox et sur Safari, aucun problème, cela marche nickel.

Mais sur google chrome, la colonne reste fixe jusqu'à ce qu'on décale plus loin que ce qui est affiché lors du chargement de la page. Je ne sais pas si c'est très clair mais avec des images cela le sera probablement +.

On peut voir que lorsqu'on charge la page, on voit le tableau jusqu'au 27/01/22 (photo 1)
Lorsqu'on commence à naviguer dans le tableau, la colonne reste fixe comme souhaité (photo 2)
Mais dès lors qu'on dépasse le 27/01/22, la colonne n'est plus fixe et bouge avec le tableau (Photo 3)





J'ai ce problème uniquement avec Google Chrome donc si quelqu'un a une solution pour corriger ce problème, je suis preneur

Merci
Modifié par leny0769 (22 Feb 2022 - 14:08)

_laurent a écrit :
Salut,

Au delà des images ca serait bien pour nous d'avoir un bout de code. Est-ce que le site est en ligne ? Est-ce que tu as un moyen de le reproduire dans un https://jsfiddle.net par exemple ?

Salut,

J'ai réussi a ajouter les images.
Concernant le code, c'est sur un ERP pour mon travail, donc c'est un peu compliqué de partager le code, mais concernant le CSS, les balises <td> de la première colonne de mon tableau ont juste en propriété CSS

Position: sticky; 
Left: 0

Je comprends. Par contre je pense qu'il y a un truc dans ton code qui gêne mais impossible pour nous de débuguer à l'aveugle... déjà savoir que c'était un <table> et pas un tableau avec des <div> ça aide

Si je fais un exemple tout basique ca a l'air de bien marcher : https://jsfiddle.net/2bjxqduv/

Du coup est-ce que tu arriverai a refaire un peu le meme tableau que tu as (sans les données, avec juste une ligne, sans trop de style etc) pour reproduire le soucis ?

_laurent a écrit :
Je comprends. Par contre je pense qu'il y a un truc dans ton code qui gêne mais impossible pour nous de débuguer à l'aveugle... déjà savoir que c'était un &lt;table&gt; et pas un tableau avec des &lt;div&gt; ça aide

Si je fais un exemple tout basique ca a l'air de bien marcher : https://jsfiddle.net/2bjxqduv/

Du coup est-ce que tu arriverai a refaire un peu le meme tableau que tu as (sans les données, avec juste une ligne, sans trop de style etc) pour reproduire le soucis ?

Cela sera pas nécéssaire, tu m'as permis de résoudre mon problème
Je n'avais pas mis la propriété

overflow: auto

Cela marche sur Google Chrome maintenant.

Merci beaucoup

Hahaha alors, cool si ca t'as aidé mais le overflow: auto; ici ne sert a rien (=il n'a pas d'effet, le scrolle st sur le parent). Tu peux le virer de l'exemple ca marchera toujours. Par contre ton code avait peut etre effectivement besoin d'un contexte de formatage que l'overflow a apporté.
https://www.alsacreations.com/astuce/lire/1543-Le-contexte-de-formatage-block-en-CSS.html

mais bon, peu importe le verre tant qu'on est bourré (ou un truc comme ça...)

Bonne journée !