10
105
Fork
You've already forked web
30

problèmes de scroll #2058

Open
opened 2026年04月20日 22:35:20 +02:00 by etienneJr · 9 comments

@pmiossec suite à #1931 @pyrog a noté qu'il y a des problèmes de scroll :

  1. quand il n'y a qu'1 photo affichée et que le curseur de la souris est à droite de cette photo, la molette ne marche plus. J'imagine qu'elle voudrait scroller en horizontal mais il n'y a qu'1 photo donc rien à scroller. Et l'utilisateur s'attend à un scroll vertical.

  2. quand il y a beaucoup de photos, le scroll au touchpad avec 2 doigts se retrouve inversé : le geste Gauche/Droite ne fait rien, et le geste Haut/Bas fait soit rien (sur windows/edge) soit fait défiler les photos mais hyper doucement (sur ubuntu/firefox)

https://cartes.app/?allez=Jardin+Sarah+Halimi+et+Mireille+Knoll%7Cw1161202427%7C2.47145%7C48.83356
image

@pmiossec suite à #1931 @pyrog a noté qu'il y a des problèmes de scroll : 1) quand il n'y a qu'1 photo affichée et que le curseur de la souris est à droite de cette photo, la molette ne marche plus. J'imagine qu'elle voudrait scroller en horizontal mais il n'y a qu'1 photo donc rien à scroller. Et l'utilisateur s'attend à un scroll vertical. 2) quand il y a beaucoup de photos, le scroll au touchpad avec 2 doigts se retrouve inversé : le geste Gauche/Droite ne fait rien, et le geste Haut/Bas fait soit rien (sur windows/edge) soit fait défiler les photos mais hyper doucement (sur ubuntu/firefox) https://cartes.app/?allez=Jardin+Sarah+Halimi+et+Mireille+Knoll%7Cw1161202427%7C2.47145%7C48.83356 ![image](/attachments/ec1fd605-b04a-4f17-8b9b-42a9de60fda3)
170 KiB

Test avec Safari (pour éliminer un problème avec Chrome). Je suis toujours sous macOS.

Idem. Plus précisément j'observe des différences dans le déclenchement du comportement :

  1. quand il n'y a qu'1 photo affichée et que le curseur de la souris est à droite de cette photo, la molette ne marche plus.

En fait ça n'a rien à voir avec le nombre de photo dans la liste du haut.

  1. Je fais défiler les photos (glissement de 2 doigts H/B sur le trackpad)
  2. Impossible de faire défiler la fiche du POI 😢
  3. Je survole un des boutons (Y aller, Favoris... Modifier ce lieu, Ecrire un avis)
  4. Je fais un défilement H/B de la fiche du POI. Elle défile bien 😎

En fait c'est même plus subtil.
C'est le survol de certaines zones de la fiche qui débloque le défilement :

  • Le titre
  • Les 4 boutons et en dessous.

C'est en fait a zone de la photo de la fiche qui ne répond pas du tout

Test avec Safari (pour éliminer un problème avec Chrome). Je suis toujours sous macOS. Idem. Plus précisément j'observe des différences dans le déclenchement du comportement : > 1. quand il n'y a qu'1 photo affichée et que le curseur de la souris est à droite de cette photo, la molette ne marche plus. En fait ça n'a rien à voir avec le nombre de photo dans la liste du haut. 1. Je fais défiler les photos (glissement de 2 doigts H/B sur le trackpad) 2. Impossible de faire défiler la fiche du POI 😢 3. Je survole un des boutons (Y aller, Favoris... Modifier ce lieu, Ecrire un avis) 4. Je fais un défilement H/B de la fiche du POI. Elle défile bien 😎 En fait c'est même plus subtil. C'est le survol de certaines zones de la fiche qui débloque le défilement : - Le titre - Les 4 boutons et en dessous. C'est en fait a zone de la photo de la fiche qui ne répond pas du tout

Test avec Firefox.

C'est le défilement horizontal qui fonctionne dans la liste de photos 😎

Et c'est toujours la zone de la photo de l'objet (en rouge) qui bloque le défilement.

Test avec Firefox. C'est le défilement horizontal qui fonctionne dans la liste de photos 😎 Et c'est toujours la zone de la photo de l'objet (en rouge) qui bloque le défilement.

@pyrog wrote in #2058 (comment):

Et c'est toujours la zone de la photo de l'objet (en rouge) qui bloque le défilement.

Oui, pour moi c'est le principal symptôme : la zone en rouge dans l'image du message précédent est insensible au défilement vertical ; quand le curseur s'y trouve, il faut le déplacer en dehors de la zone pour retrouver le défilement

@pyrog wrote in https://codeberg.org/cartes/web/issues/2058#issuecomment-13422864: > > Et c'est toujours la zone de la photo de l'objet (en rouge) qui bloque le défilement. Oui, pour moi c'est le principal symptôme : la zone en rouge dans l'image du message précédent est insensible au défilement vertical ; quand le curseur s'y trouve, il faut le déplacer en dehors de la zone pour retrouver le défilement
Author
Member
Copy link

@S_t_C wrote in #2058 (comment):

la zone en rouge dans l'image du message précédent est insensible au défilement vertical ;

Oui, c'est ce que j'avais essayé d'exprimer dans mon point 1. Merci de l'avoir reformulé plus clairement 😅
Techniquement c'est logique, dans cette zone, la molette déclenche un scroll horizontal... qui n'existe pas.

@S_t_C wrote in https://codeberg.org/cartes/web/issues/2058#issuecomment-13422987: > la zone en rouge dans l'image du message précédent est insensible au défilement vertical ; Oui, c'est ce que j'avais essayé d'exprimer dans mon point 1. Merci de l'avoir reformulé plus clairement 😅 Techniquement c'est logique, dans cette zone, la molette déclenche un scroll horizontal... qui n'existe pas.

Oui, c'est ce que j'avais essayé d'exprimer dans mon point 1.

Tu parlais de la liste de la photo de la fiche.
Je comprenais la liste des photos sous le clic 😆

J'ai fait une requête overpass pour trouver des objets avec 4 photos Commons.
Overpass va mieux, mais Cartes ne supporte pas les valeurs multiples pour le tag wikimedia_commons.

Exemples :

Heureusement, ce POI n'a que 2 photos (1 bandeau moche du site web qui à l'avantage d'être très large, 1 photo Commons).
Du coup on voit que cette zone peut défiler à l'horizontale.

> Oui, c'est ce que j'avais essayé d'exprimer dans mon point 1. Tu parlais de la liste de la photo de la fiche. Je comprenais la liste des photos sous le clic 😆 J'ai fait une [requête overpass](https://overpass-turbo.eu/s/2ond) pour trouver des objets avec 4 photos Commons. Overpass va mieux, mais Cartes ne supporte pas les valeurs multiples pour le tag `wikimedia_commons`. Exemples : - [Bâtiment](https://cartes.app/?allez=|w51249158) hébergeant le musée des transmissions - [Tombe de Guillaume Corneille van Beverloo](https://cartes.app/?allez=Corneille+%E2%80%93+Guillaume+Cornelis+van+Beverloo%7Cw622453897%7C2.17904%7C49.07527#21.04/49.0753007/2.1790801/0/40) Heureusement, ce POI n'a que 2 photos (1 bandeau moche du site web qui à l'avantage d'être très large, 1 photo Commons). Du coup on voit que cette zone peut défiler à l'horizontale. - [maison Fournaise ](https://cartes.app/?allez=Maison+Fournaise%7Cw160235038%7C2.16324%7C48.88963#17.5/48.8896/2.163266)

Voir aussi #2060 et #2061

Voir aussi #2060 et #2061

Test sous Windows avec Chrome et Edge.

Le problème du scrolling est reproductible.

Pour faire défiler les photos dans une liste, l'utilisation de la molette de la souris est intuitive.

Sur le touchpad du Mac, le geste qui simule la molette est bien un glisser vertical avec 2 doigts.

Le comportement est cohérent mais du coup peu naturel et perturbant pour l’utilisateur.

Firefox doit avoir un réglage pour éviter ça.
A creuser

Test sous Windows avec Chrome et Edge. Le problème du scrolling est reproductible. Pour faire défiler les photos dans une liste, l'utilisation de la molette de la souris est intuitive. Sur le touchpad du Mac, le geste qui simule la molette est bien un glisser vertical avec 2 doigts. Le comportement est cohérent mais du coup peu naturel et perturbant pour l’utilisateur. Firefox doit avoir un réglage pour éviter ça. A creuser
Owner
Copy link

Oulah, je crois que j'avais mal compris la PR initiale. Elle fait visiblement un truc un peu trop magique. Ça me semblait moins problématique avant.

En résumé, la PR a essayé de régler le problème pour la molette de souris mais a complètement cassé l'expérience pour les pavés tactiles, qui ont des changes de largement dominer la molette de souris dans la population générale 😅

Oulah, je crois que j'avais mal compris la PR initiale. Elle fait visiblement un truc un peu trop magique. Ça me semblait moins problématique avant. En résumé, la PR a essayé de régler le problème pour la molette de souris mais a complètement cassé l'expérience pour les pavés tactiles, qui ont des changes de largement dominer la molette de souris dans la population générale 😅
Owner
Copy link

Je crois avoir corrigé les deux points problématiques ici. Je vous laisse tester :)

Je crois avoir corrigé les deux points problématiques ici. Je vous laisse tester :)
Sign in to join this conversation.
No Branch/Tag specified
master
chore/i18n-missing-strings-step-3
abostats
SynchroM-master
gps
embeddings
lysios-patch-5
lysios-patch-4
lysios-patch-3
lysios-patch-2
lysios-patch-1
abo-serveur2
clim
zone-en-favori
categories_toujours_visibles
rechercher_ici_avant_resultats
test-2365
panoramax-contribution
add-categories-validations
gel-bug-prod
osm-note-2
broken
wikidata_booking
fuse7.3
lysios-patrimoine-3
gps2
atproto-fix-2
styles-secondaires-mais-maison
atproto-scopes
itineraire-printemps-2026
modal-sheet-5.6
nlnet-cost-climate-perf
pb-icones-religieux
couvoiture
etiennejr-patch-2
meteo-fainéante
logo-static-url
poc-page-vitrine
remove-compass
test-reproduce-1795
display-cycleway-lanes-2
poc-image
add-media-condition
mapterhorn
test-indoor-equal
outdoors-VS-indoorEqual
hiking-colors
fix-blog-typing
poc-next-international
fix-map-style-modal-not-closing
i18n
hide-odd-zoom-levels
filter_categories
resume_wikipedia
deplacement_bouttons
fix-1095
mobile_permettre_selection
position-carte-initiale
dégradé-icônes
better_wikipedia
affichage_donnees_wikidata
mobile-permettre-selection
avis-details
perf-seo
modal-sheet-5
plans-novembre
display-cycleway-lanes
fix-1227
fix-1234
etiennejr-patch-1
update-1240
fix-1236
fix-1131
photon-search-street
fix-1221
article-avis
net-haut-zoom
baies-moins-visibles
belles-fiches-lieu
fix-1157
bug-page-vie-privée
use-watername
fix-1176
carte-du-onde
fix-1166
page-news
tchou
add-icon-alias
vitesse
photon-opensearch
private-in-italic
bâtiments-3D
merge-categories
handle-private-highway
improve-findcategory
injection-pmtiles
fix-1128
check-icons
update-readme
category-rugby
bug-position-carte-vs-lieu
limites-vitesse
improve-find-category-from-tags-v2
integrer
document-osmfeature
translate-document
velo-fin-aout-25
velo-ete-2025
moins-de-maptiler
planet-pmtiles-tilemaker
fix-1048
panoramax-leger
plume
horaires-i18n
planet
maj-deps-juillet-2025
improve-find-category-from-tags
bug-encart
interactions-encart-mobile
clic-on-station
fix-1028
fix-1014
edit
add-big-rivers
add-shortbread-tiles
handle-deleted-osm-elements-v2
codeberg
improve-useEffect
immoloc
update-dashboard
analyze
terradraw
sombre2
calendar
poi-sprites-using-svg
style-sombre
sprites
annuaire
motis-gtfs-attributes
next-styled-components
dev
cool2
cool
panoramax-angle
env-static-urls
borders-only
panoramax2
intelligence
debug-iles
nouveau-serveur
france-protomaps
turbo
fouss/cartes-#338
blog2
legislatives
presentation
pas-de-geoloc-si-hash-different
protomaps
vaul
carte-trains
citiz
maj-paquets
icones
ui2
bblog
voyagevoyage
test-image-origine
bugimagefin
searchParams
voyage
avion
perf
studio
piscine
journée
année
journée-transition
score-dès-acceuil
fix-space-problem
rebase-5août
correspondance
règles-séparées
indeps-acre
demo
indeps
indeps-cachés
indication-temps-plein
indeps-refactor-simulations
indeps-vue-comparaison
indeps-inversion
barème-continu
indeps-démo
textes-branches-sécu
engine-enum
2019
transport
publicodes
as
infrance-nouvelle-landing
better-translation
co2
simplifATMP
controle-SMIC
webi18n
bug-avantages-en-nature
revert-352-infrance-navigation-v2
laem-patch-1
robots.txt
improve-perf
iframe-bugfix
quickfixes
lib
irsimple
hiringinfrance.com
dégradé
refstate
johan
zrr
logo-interactif
revert-216-improve-tracking
redesign2
zrr2
fixtrad
correction-salaire-brut
petit-state
alien-consolidate
translate-ui
npm
alien-brut-net
translatable
différent
ir18
fix-typo
add-tracking
fix-collect-missing
défauts-partout
fix-double-unfold-three
fix-double-unfold
versement-transport
blocker-questions
v3
v2.1
v2
v1
v0.6.4
v0.6.3
v0.6.2
v0.6.1
v0.6.0
0.7.0
v0.5.1
v0.5.0
v0.4.2
v0.4.1
v0.4.0
v0.3.3
v0.3.2
v0.3.1
v0.3
v0.2
v0.1-cdd-alpha
v0-démo-tag-nav
Labels
Clear labels
🎨 Design
À propos de l'interface et de l'UX
💡 Idée
Nouvelle feature à intégrer
question
Further information is requested
🌍 OSM
À propos de l'affichage et l'édition des éléments OSM
🌱 Amélioration
Amélioration/fix de l'existant
🐞 Bug
Something isn't working
📊 SEO
📋 Catégories
À propos des catégories de recherche et de l'annuaire
📖 Wiki
📝Avis
A propos de la fonction avis et de bluesky
📢 Oyez
📷 Photos
A propos des photos (sources, affichage)
🔍Recherche
A propos de la barre de recherche et de photon
🔥 Actuel
🔧 tech
🖌 Styles
Styles de la carte
🧝i18n
🧪 R&D
🚍 Transports
🚙 Voiture
🚨Prioritaire
Ticket à traiter rapidement
🚲Vélo
Cartes
climat
Communication
demo
Cette branche doit être déployée comme une démo
dependencies
Pull requests that update a dependency file
javascript
Pull requests that update javascript code
Pas urgent
Plein-air
Tuiles
Verso
Vieux
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
4 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
cartes/web#2058
Reference in a new issue
cartes/web
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?