From e658097b9932b35bd3889ebe0fc0fa2f78f29ab2 Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Sun, 25 Jun 2023 10:06:14 +0800 Subject: [PATCH] fix: modal height issue in ios devices (#4106) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### What type of PR is this? /area console /kind improvement /milestone 2.7.x #### What this PR does / why we need it: 优化 VModal 组件在 iOS 设备上底部和顶部被遮挡的问题，解决方案来自于：https://github.com/Faisal-Manzer/postcss-viewport-height-correction | before | After | | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![IMG_0319](https://github.com/halo-dev/halo/assets/21301288/71d15e51-5cf9-402e-b6ce-fff4e1014f72) | ![IMG_0315](https://github.com/halo-dev/halo/assets/21301288/6c3b4b75-2029-4b32-8dcc-eead3e479ab1) | | ![IMG_0318](https://github.com/halo-dev/halo/assets/21301288/b4f586b4-34e1-48ea-97ed-7f1f70184346) | ![IMG_0316](https://github.com/halo-dev/halo/assets/21301288/7dee64bb-2328-44ef-a9f6-534ea4c005fe) | #### Which issue(s) this PR fixes: Ref https://github.com/halo-dev/halo/issues/2699 #### Does this PR introduce a user-facing change? ```release-note 优化 Console 端弹框组件（VModal）在 iOS 设备的高度问题。 ``` --- console/package.json | 3 ++- console/pnpm-lock.yaml | 22 ++++++++++++++++++++++ console/postcss.config.js | 1 + console/src/App.vue | 20 ++++++++++++++++++++ 4 files changed, 45 insertions(+), 1 deletion(-) diff --git a/console/package.json b/console/package.json index d25e38bca..46862a8f2 100644 --- a/console/package.json +++ b/console/package.json @@ -43,7 +43,6 @@ "@codemirror/legacy-modes": "^6.3.0", "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.5.1", - "codemirror": "^6.0.1", "@emoji-mart/data": "^1.0.8", "@formkit/core": "^0.17.3", "@formkit/i18n": "^0.17.3", @@ -72,6 +71,7 @@ "@vueuse/router": "^9.6.0", "@vueuse/shared": "^9.6.0", "axios": "^0.27.2", + "codemirror": "^6.0.1", "colorjs.io": "^0.4.3", "dayjs": "^1.11.7", "emoji-mart": "^5.3.3", @@ -132,6 +132,7 @@ "jsdom": "^20.0.3", "lint-staged": "^13.2.2", "postcss": "^8.4.21", + "postcss-viewport-height-correction": "^1.1.1", "prettier": "^2.8.8", "prettier-plugin-tailwindcss": "^0.1.13", "randomstring": "^1.2.3", diff --git a/console/pnpm-lock.yaml b/console/pnpm-lock.yaml index c57b259c1..8b1ca63a2 100644 --- a/console/pnpm-lock.yaml +++ b/console/pnpm-lock.yaml @@ -293,6 +293,9 @@ importers: postcss: specifier: ^8.4.21 version: 8.4.21 + postcss-viewport-height-correction: + specifier: ^1.1.1 + version: 1.1.1 prettier: specifier: ^2.8.8 version: 2.8.8 @@ -9092,6 +9095,10 @@ packages: resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} dev: true + /picocolors@0.2.1: + resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} + dev: true + /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -9206,6 +9213,21 @@ packages: /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} + /postcss-viewport-height-correction@1.1.1: + resolution: {integrity: sha512-kphLY4Au76uD2t4lZZ6mAExx6uMiWsxbFiBckfSJJZAbBZZGPNbLSztaDRSI4JUdKpK4JBbscfyKJf03Y2ae0g==} + engines: {node: '>=8.0.0'} + dependencies: + postcss: 7.0.39 + dev: true + + /postcss@7.0.39: + resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==} + engines: {node: '>=6.0.0'} + dependencies: + picocolors: 0.2.1 + source-map: 0.6.1 + dev: true + /postcss@8.4.21: resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} engines: {node: ^10 || ^12 || >=14} diff --git a/console/postcss.config.js b/console/postcss.config.js index 12a703d90..07e1c84c5 100644 --- a/console/postcss.config.js +++ b/console/postcss.config.js @@ -2,5 +2,6 @@ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, + "postcss-viewport-height-correction": {}, }, }; diff --git a/console/src/App.vue b/console/src/App.vue index 49b30d27e..5772dd5ef 100644 --- a/console/src/App.vue +++ b/console/src/App.vue @@ -94,6 +94,26 @@ const formkitLocales = { }; const formkitConfig = inject(Symbol.for("FormKitConfig")) as FormKitConfig; formkitConfig.locale = formkitLocales[i18n.global.locale.value] || "zh"; + +// Fix 100vh issue in ios devices +function setViewportProperty(doc: HTMLElement) { + let prevClientHeight: number; + const customVar = "--vh"; + function handleResize() { + const clientHeight = doc.clientHeight; + if (clientHeight === prevClientHeight) return; + requestAnimationFrame(function updateViewportHeight() { + doc.style.setProperty(customVar, clientHeight * 0.01 + "px"); + prevClientHeight = clientHeight; + }); + } + handleResize(); + return handleResize; +} +window.addEventListener( + "resize", + setViewportProperty(document.documentElement) +);