From 11d25a0b0ed2f9facce6a9c91257ef4a4549b6af Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 17 Jul 2022 15:10:35 +0800
Subject: [PATCH] fix: failed to get correct height of safe area element
 (#10827)

* fix: failed to get correct height of safe area element

* docs: upd
---
 packages/vant/src/composables/use-height.ts       | 15 +++++++++++++--
 packages/vant/src/composables/use-placeholder.tsx |  2 +-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/vant/src/composables/use-height.ts b/packages/vant/src/composables/use-height.ts
index a6e650832..287bde84c 100644
--- a/packages/vant/src/composables/use-height.ts
+++ b/packages/vant/src/composables/use-height.ts
@@ -1,7 +1,10 @@
 import { useRect } from '@vant/use';
 import { Ref, ref, onMounted, nextTick } from 'vue';
 
-export const useHeight = (element: Element | Ref<Element | undefined>) => {
+export const useHeight = (
+  element: Element | Ref<Element | undefined>,
+  withSafeArea?: boolean
+) => {
   const height = ref<number>();
 
   const setHeight = () => {
@@ -10,8 +13,16 @@ export const useHeight = (element: Element | Ref<Element | undefined>) => {
 
   onMounted(() => {
     nextTick(setHeight);
+
+    // If the element is using safe area, the system will not return the correct height on page load.
+    // So we need to wait for the height to be set.
     // https://github.com/youzan/vant/issues/10131
-    setTimeout(setHeight, 100);
+    // https://stackoverflow.com/questions/64891541
+    if (withSafeArea) {
+      for (let i = 1; i <= 3; i++) {
+        setTimeout(setHeight, 100 * i);
+      }
+    }
   });
 
   return height;
diff --git a/packages/vant/src/composables/use-placeholder.tsx b/packages/vant/src/composables/use-placeholder.tsx
index f2c70f2bc..849550177 100644
--- a/packages/vant/src/composables/use-placeholder.tsx
+++ b/packages/vant/src/composables/use-placeholder.tsx
@@ -3,7 +3,7 @@ import { useHeight } from './use-height';
 import type { BEM } from '../utils/create';
 
 export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {
-  const height = useHeight(contentRef);
+  const height = useHeight(contentRef, true);
 
   return (renderContent: () => JSX.Element) => (
     <div