5 Commits

Author SHA1 Message Date
ext.jeremy.guillot@maxicoffee.domains
90d6feee2d fix(layout): corriger la barre blanche en bas sur mobile réel
Sur un vrai appareil mobile, 100vh inclut le chrome du navigateur
(barre de navigation), ce qui cachait le contenu en bas.
- Remplace h-screen (100vh) par h-[100dvh] (dynamic viewport height)
- Ajoute viewport-fit=cover pour préparer le support safe-area iOS
2026-03-26 16:35:00 +01:00
4c80aa6b42 Merge pull request 'fix(reader): corriger le scroll vers le haut bloqué en mode infini' (#31) from fix/reader-infinite-scroll-up into main
All checks were successful
Deploy / deploy (push) Successful in 1m12s
Reviewed-on: #31
2026-03-26 16:11:50 +01:00
c0307a9173 Merge branch 'main' into fix/reader-infinite-scroll-up 2026-03-26 16:11:43 +01:00
ext.jeremy.guillot@maxicoffee.domains
45f7e88024 fix(reader): corriger le scroll vers le haut bloqué en mode infini
Les IntersectionObserver utilisaient root: null (viewport) au lieu du
conteneur de scroll réel (.infinite-reader). Le rootMargin de 1000px
était donc calculé par rapport au viewport, causant un montage/démontage
des pages à des moments imprécis et des sauts de layout lors du scroll
vers le haut.

Supprime également scroll-behavior: smooth sur le conteneur, qui entrait
en conflit avec le scroll anchoring du navigateur lors des corrections de
position, donnant l'impression que le scroll redescendait tout seul.
2026-03-26 16:11:19 +01:00
507fac5b5e Merge pull request 'fix(reader): corriger le chevauchement des pages en mode scroll avec zoom' (#30) from fix/reader-zoom-overlap-mobile into main
All checks were successful
Deploy / deploy (push) Successful in 1m19s
Reviewed-on: #30
2026-03-26 15:58:06 +01:00
3 changed files with 4 additions and 5 deletions

View File

@@ -109,7 +109,7 @@ import ReaderPage from './ReaderPage.vue';
visibilityObserver.value?.disconnect(); visibilityObserver.value?.disconnect();
observer.value = new IntersectionObserver(observeIntersection, { observer.value = new IntersectionObserver(observeIntersection, {
root: null, root: containerRef.value,
threshold: 0.5 threshold: 0.5
}); });
@@ -124,7 +124,7 @@ import ReaderPage from './ReaderPage.vue';
} }
}); });
}, },
{ root: null, rootMargin: '1000px 0px', threshold: 0 } { root: containerRef.value, rootMargin: '1000px 0px', threshold: 0 }
); );
nextTick(() => { nextTick(() => {
@@ -328,7 +328,6 @@ import ReaderPage from './ReaderPage.vue';
@apply flex-1 flex flex-col items-center overflow-y-auto relative min-h-0; @apply flex-1 flex flex-col items-center overflow-y-auto relative min-h-0;
/* Réduction du padding sur mobile */ /* Réduction du padding sur mobile */
@apply py-2 sm:py-8; @apply py-2 sm:py-8;
scroll-behavior: smooth;
} }
.page-wrapper { .page-wrapper {

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex"> <div class="h-[100dvh] overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
<Header <Header
:show-menu-button="isReaderMode" :show-menu-button="isReaderMode"
@menu-click="toggleSidebar" @menu-click="toggleSidebar"

View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Vue App</title> <title>Vue App</title>
{{ encore_entry_link_tags('vue-app') }} {{ encore_entry_link_tags('vue-app') }}
</head> </head>