From 59f72339fa375e396878b67801ab054e96e4da2f Mon Sep 17 00:00:00 2001 From: "ext.jeremy.guillot@maxicoffee.domains" Date: Thu, 26 Mar 2026 15:56:18 +0100 Subject: [PATCH] fix(reader): corriger le chevauchement des pages en mode scroll avec zoom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit En mode scroll infini, le zoom était appliqué via transform: scale() qui n'affecte pas le flux de mise en page. Les pages se chevauchaient visuellement quand le zoom était modifié. Passage à la propriété CSS zoom dans les deux modes pour un comportement de layout correct. Met aussi à jour le calcul de hauteur des placeholders pour inclure le facteur de zoom et éviter les sauts de layout lors du chargement paresseux. --- .../reader/presentation/components/InfiniteReader.vue | 6 +++--- .../domain/reader/presentation/components/ReaderPage.vue | 8 ++------ 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue b/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue index be5636e..29fe30a 100644 --- a/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue +++ b/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue @@ -94,14 +94,14 @@ import ReaderPage from './ReaderPage.vue'; }); }; - // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage + // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage, zoom inclus const getPlaceholderHeight = (page) => { const dims = page?.dimensions; - if (!dims?.width || !dims?.height) return 800; + if (!dims?.width || !dims?.height) return Math.round(800 * props.zoom); const displayWidth = windowWidth.value < 1200 ? Math.min(dims.width, windowWidth.value * 0.95) : Math.min(dims.width, 1200); - return Math.round((dims.height / dims.width) * displayWidth); + return Math.round((dims.height / dims.width) * displayWidth * props.zoom); }; const setupObservers = () => { diff --git a/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue b/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue index 36d88db..2cce8a6 100644 --- a/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue +++ b/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue @@ -87,13 +87,9 @@ import { useReaderStore } from '../../application/store/readerStore'; const store = useReaderStore(); - // En mode single : zoom via la propriété CSS `zoom` (affecte le layout → scrollbars naturelles) - // En mode infinite : zoom via transform: scale (pas d'impact layout souhaité) + // zoom via la propriété CSS `zoom` dans les deux modes (affecte le layout → pas de chevauchement en mode scroll) const containerStyle = computed(() => { - if (store.readingMode === 'single') { - return { zoom: props.zoom }; - } - return { transform: `scale(${props.zoom})` }; + return { zoom: props.zoom }; }); const imageRef = ref(null); -- 2.49.1