From a10f7805b32d97cf0634075a6fbb37d2a477d2e8 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 6 Jan 2023 12:09:37 +0100 Subject: [PATCH 1/2] fix print preview regression in Chrome >= 108 --- .../src/hooks/features/export/useGridPrintExport.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index 3ba78776ab55..863432bfd7ce 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -128,6 +128,8 @@ export const useGridPrintExport = ( // Allow to overflow to not hide the border of the last row const gridMain: HTMLElement | null = gridClone.querySelector(`.${gridClasses.main}`); gridMain!.style.overflow = 'visible'; + // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642 + gridMain!.style.contain = 'size'; const columnHeaders = gridClone.querySelector(`.${gridClasses.columnHeaders}`); const columnHeadersInner = columnHeaders!.querySelector( From fab8ea9b73fc1e97e612e22b6a8ad081255e672f Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 6 Jan 2023 15:35:01 +0100 Subject: [PATCH 2/2] only apply contain styles on affected chrome versions --- .../hooks/features/export/useGridPrintExport.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index bbec96ffbd3b..7850263ca60e 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -30,6 +30,11 @@ function raf() { }); } +function getChromeVersion() { + const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./); + return raw ? parseInt(raw[2], 10) : null; +} + type PrintWindowOnLoad = ( printWindow: HTMLIFrameElement, options?: Pick< @@ -130,8 +135,12 @@ export const useGridPrintExport = ( // Allow to overflow to not hide the border of the last row const gridMain: HTMLElement | null = gridClone.querySelector(`.${gridClasses.main}`); gridMain!.style.overflow = 'visible'; - // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642 - gridMain!.style.contain = 'size'; + + const chromeVersion = getChromeVersion(); + if (chromeVersion && chromeVersion >= 108) { + // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642 + gridClone!.style.contain = 'size'; + } const columnHeaders = gridClone.querySelector(`.${gridClasses.columnHeaders}`); const columnHeadersInner = columnHeaders!.querySelector(