diff --git a/.changeset/grumpy-zoos-rush.md b/.changeset/grumpy-zoos-rush.md new file mode 100644 index 0000000000..bd439fe6f3 --- /dev/null +++ b/.changeset/grumpy-zoos-rush.md @@ -0,0 +1,5 @@ +--- +'gitbook': patch +--- + +Fix Image blocks zoomable behaviour diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts index 5ed653994a..74f99d5b4f 100644 --- a/packages/gitbook/e2e/pages.spec.ts +++ b/packages/gitbook/e2e/pages.spec.ts @@ -378,6 +378,21 @@ const testCases: TestsCase[] = [ fullPage: true, screenshot: { threshold: 0.8 }, }, + { + name: 'Images (with zoom)', + url: 'blocks/block-images', + run: async (page) => { + await waitForCookiesDialog(page); + const zoomImage = page.getByTestId('zoom-image'); + if (!zoomImage) { + throw new Error('Image block not found'); + } + await zoomImage.first().click(); + await page.waitForSelector('[data-testid="zoom-image-modal"]'); + }, + fullPage: true, + screenshot: { threshold: 0.8 }, + }, { name: 'Inline Images', url: 'blocks/inline-images', diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx index 2d5a8a35ee..80b127e818 100644 --- a/packages/gitbook/src/components/DocumentView/Caption.tsx +++ b/packages/gitbook/src/components/DocumentView/Caption.tsx @@ -39,6 +39,7 @@ export function Caption( 'after:block', 'after:absolute', 'after:-inset-[0]', + 'after:pointer-events-none', fit ? 'w-fit' : null, withBorder ? 'rounded straight-corners:rounded-none after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none' diff --git a/packages/gitbook/src/components/utils/ZoomImage.tsx b/packages/gitbook/src/components/utils/ZoomImage.tsx index 7fdcd9feaa..773b44a282 100644 --- a/packages/gitbook/src/components/utils/ZoomImage.tsx +++ b/packages/gitbook/src/components/utils/ZoomImage.tsx @@ -142,6 +142,7 @@ export function ZoomImage( ) : ( // When zooming, remove the image from the DOM to let the browser animates it with View Transition.