From dc17d94c4579a2f3ca361a366fccb24c0ca4868d Mon Sep 17 00:00:00 2001 From: Hiroshi Urabe Date: Thu, 16 Nov 2023 10:37:00 +0900 Subject: [PATCH] Lightbox: Fix close button position. (#56125) * use width 100% * remove scroll bar width * refactor * use documentElement --- packages/block-library/src/image/style.scss | 6 +++--- packages/block-library/src/image/view.js | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 2b8631fffe3c9..303f43ce4ed5f 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -215,7 +215,7 @@ left: 0; z-index: 100000; overflow: hidden; - width: 100vw; + width: 100%; height: 100vh; box-sizing: border-box; visibility: hidden; @@ -372,7 +372,7 @@ @keyframes lightbox-zoom-in { 0% { - transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); + transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); } 100% { transform: translate(-50%, -50%) scale(1, 1); @@ -389,6 +389,6 @@ } 100% { visibility: hidden; - transform: translate(calc(-50vw + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); + transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); } } diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index ef46e932d2490..74ed649a0df12 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -568,6 +568,9 @@ function setStyles( context, ref ) { --wp--lightbox-image-width: ${ lightboxImgWidth }px; --wp--lightbox-image-height: ${ lightboxImgHeight }px; --wp--lightbox-scale: ${ containerScale }; + --wp--lightbox-scrollbar-width: ${ + window.innerWidth - document.documentElement.clientWidth + }px; } `; }