From bfc710fe704af602eb85ca238a3c0bc63d8be012 Mon Sep 17 00:00:00 2001 From: para1118 Date: Thu, 22 Apr 2021 18:55:01 +0300 Subject: [PATCH 1/5] fix safari scroll in task - https://github.com/ant-design/ant-design/issues/23202 --- src/Dom/scrollLocker.ts | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/src/Dom/scrollLocker.ts b/src/Dom/scrollLocker.ts index d4b98a8c..389c2abf 100644 --- a/src/Dom/scrollLocker.ts +++ b/src/Dom/scrollLocker.ts @@ -1,5 +1,6 @@ import getScrollBarSize from '../getScrollBarSize'; import setStyle from '../setStyle'; +import type React from 'react'; export interface scrollLockOptions { container: HTMLElement; @@ -17,6 +18,31 @@ const scrollingEffectClassNameReg = new RegExp( 'g', ); +let scrollPosition = 0; + +const setContainerStyle = ( + container: HTMLElement, + scrollBarSize: number, +): React.CSSProperties => { + const defaultStyle: React.CSSProperties = { + width: `calc(100% - ${scrollBarSize}px)`, + overflow: 'hidden', + overflowX: 'hidden', + overflowY: 'hidden', + }; + + if (container === document.body) { + scrollPosition = window.pageYOffset; + return { + ...defaultStyle, + position: 'fixed', + top: `-${scrollPosition}px`, + }; + } + + return defaultStyle; +}; + let uuid = 0; // https://github.com/ant-design/ant-design/issues/19340 @@ -91,12 +117,8 @@ export default class ScrollLocker { cacheStyle.set( container, setStyle( - { - width: `calc(100% - ${scrollBarSize}px)`, - overflow: 'hidden', - overflowX: 'hidden', - overflowY: 'hidden', - }, + // https://github.com/ant-design/ant-design/issues/23202 + setContainerStyle(container, scrollBarSize), { element: container, }, @@ -134,6 +156,10 @@ export default class ScrollLocker { if (!scrollingEffectClassNameReg.test(containerClassName)) return; setStyle(cacheStyle.get(container), { element: container }); + // https://github.com/ant-design/ant-design/issues/23202 + if (container === document.body) { + window.scrollTo(0, scrollPosition); + } cacheStyle.delete(container); container.className = container.className .replace(scrollingEffectClassNameReg, '') From 7745599cb233c12460234399ec3ec71d0c11366e Mon Sep 17 00:00:00 2001 From: para1118 Date: Thu, 22 Apr 2021 19:42:50 +0300 Subject: [PATCH 2/5] fix safari test --- tests/scrollLocker.test.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/tests/scrollLocker.test.ts b/tests/scrollLocker.test.ts index 97fef8e3..79bd3762 100644 --- a/tests/scrollLocker.test.ts +++ b/tests/scrollLocker.test.ts @@ -12,6 +12,9 @@ describe('ScrollLocker', () => { const effectStyle = 'overflow: hidden; overflow-x: hidden; overflow-y: hidden;'; + const bodyEffectStyle = + 'overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: fixed; top: -0px;'; + // jsdom can not capture calc const initialStyle = ''; @@ -29,7 +32,7 @@ describe('ScrollLocker', () => { scrollLocker.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); scrollLocker.unLock(); @@ -44,7 +47,7 @@ describe('ScrollLocker', () => { scrollLocker.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); scrollLocker.unLock(); @@ -66,17 +69,17 @@ describe('ScrollLocker', () => { locker2.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); locker2.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); locker1.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); scrollLocker.unLock(); @@ -108,14 +111,14 @@ describe('ScrollLocker', () => { locker2.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); expect(testContainer.className).toBe(effectClassname); expect(testContainer.getAttribute('style')).toBe(effectStyle); locker1.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); expect(testContainer.className).toBe(effectClassname); expect(testContainer.getAttribute('style')).toBe(effectStyle); @@ -151,7 +154,7 @@ describe('ScrollLocker', () => { }); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(effectStyle); + expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); scrollLocker.reLock({ container: testContainer, From 791a3bbfdf6dfaf8a0415ab581184233e2a40614 Mon Sep 17 00:00:00 2001 From: para1118 Date: Fri, 14 May 2021 17:52:33 +0300 Subject: [PATCH 3/5] Revert "fix safari test" This reverts commit 7745599c --- tests/scrollLocker.test.ts | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/tests/scrollLocker.test.ts b/tests/scrollLocker.test.ts index 79bd3762..97fef8e3 100644 --- a/tests/scrollLocker.test.ts +++ b/tests/scrollLocker.test.ts @@ -12,9 +12,6 @@ describe('ScrollLocker', () => { const effectStyle = 'overflow: hidden; overflow-x: hidden; overflow-y: hidden;'; - const bodyEffectStyle = - 'overflow: hidden; overflow-x: hidden; overflow-y: hidden; position: fixed; top: -0px;'; - // jsdom can not capture calc const initialStyle = ''; @@ -32,7 +29,7 @@ describe('ScrollLocker', () => { scrollLocker.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); scrollLocker.unLock(); @@ -47,7 +44,7 @@ describe('ScrollLocker', () => { scrollLocker.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); scrollLocker.unLock(); @@ -69,17 +66,17 @@ describe('ScrollLocker', () => { locker2.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); locker2.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); locker1.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); scrollLocker.unLock(); @@ -111,14 +108,14 @@ describe('ScrollLocker', () => { locker2.lock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); expect(testContainer.className).toBe(effectClassname); expect(testContainer.getAttribute('style')).toBe(effectStyle); locker1.unLock(); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); expect(testContainer.className).toBe(effectClassname); expect(testContainer.getAttribute('style')).toBe(effectStyle); @@ -154,7 +151,7 @@ describe('ScrollLocker', () => { }); expect(document.body.className).toBe(effectClassname); - expect(document.body.getAttribute('style')).toBe(bodyEffectStyle); + expect(document.body.getAttribute('style')).toBe(effectStyle); scrollLocker.reLock({ container: testContainer, From f75b7059f5373f8e43cae57194a2b58611913ff6 Mon Sep 17 00:00:00 2001 From: para1118 Date: Fri, 14 May 2021 17:54:28 +0300 Subject: [PATCH 4/5] add IosDevice flag --- src/Dom/scrollLocker.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Dom/scrollLocker.ts b/src/Dom/scrollLocker.ts index 389c2abf..98163106 100644 --- a/src/Dom/scrollLocker.ts +++ b/src/Dom/scrollLocker.ts @@ -31,7 +31,8 @@ const setContainerStyle = ( overflowY: 'hidden', }; - if (container === document.body) { + const isIosDevice = /iP(ad|hone|od)|MacIntel/.test(window.navigator.platform); + if (isIosDevice && container === document.body) { scrollPosition = window.pageYOffset; return { ...defaultStyle, From 7b579fdd1d7394d4116c2bc4f7a5d5765164fb6f Mon Sep 17 00:00:00 2001 From: para1118 Date: Fri, 14 May 2021 18:45:36 +0300 Subject: [PATCH 5/5] add IosDevice for unlock() --- src/Dom/scrollLocker.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Dom/scrollLocker.ts b/src/Dom/scrollLocker.ts index 98163106..4ca1fef7 100644 --- a/src/Dom/scrollLocker.ts +++ b/src/Dom/scrollLocker.ts @@ -19,6 +19,7 @@ const scrollingEffectClassNameReg = new RegExp( ); let scrollPosition = 0; +const isIosDevice = /iP(ad|hone|od)|MacIntel/.test(window.navigator.platform); const setContainerStyle = ( container: HTMLElement, @@ -31,7 +32,6 @@ const setContainerStyle = ( overflowY: 'hidden', }; - const isIosDevice = /iP(ad|hone|od)|MacIntel/.test(window.navigator.platform); if (isIosDevice && container === document.body) { scrollPosition = window.pageYOffset; return { @@ -158,7 +158,7 @@ export default class ScrollLocker { setStyle(cacheStyle.get(container), { element: container }); // https://github.com/ant-design/ant-design/issues/23202 - if (container === document.body) { + if (isIosDevice && container === document.body) { window.scrollTo(0, scrollPosition); } cacheStyle.delete(container);