pb-sxp-ui 1.19.17 → 1.19.19

package/dist/index.css

@@ -63,11 +63,7 @@ a:active {
   color: #000;
   outline: none;
 }
-
-:root {
-  --safe-area-inset-bottom: constant(safe-area-inset-bottom);
-  --safe-area-inset-bottom: env(safe-area-inset-bottom);
-}
+
 .pb-appoint-form {
   position: relative;
   height: 100%;
@@ -1073,10 +1069,7 @@ a:active {
           flex: 1;
   height: 100vh;
   overflow-y: auto;
-  padding-top: 18px;
-  padding-left: 18px;
-  padding-right: 18px;
-  padding-bottom: calc(18px + var(--safe-area-inset-bottom, 0px));
+  padding: 18px;
 }
 .waterfallFlow__title {
   text-align: center;
@@ -1555,7 +1548,6 @@ a:active {
   top: 0;
   left: 0;
   right: 0;
-  bottom: var(--safe-area-inset-bottom, 0px);
   width: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -2467,7 +2459,7 @@ button.swiper-pagination-bullet {
   left: 0;
   top: 0;
   right: 0;
-  bottom: var(--safe-area-inset-bottom, 0px);
+  bottom: 0;
   z-index: 100;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;

package/dist/index.js

@@ -10305,6 +10305,106 @@ const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailDat
 };
 var CommodityGroup$1 = memo(CommodityGroup);
 
+function useVisibleHeight() {
+    const [visibleHeight, setVisibleHeight] = useState(0);
+    const [bottomHeight, setBottomHeight] = useState(0);
+    const getVisibleContentHeight = () => {
+        // 方法优先级：
+        // 1. visualViewport.height (最准确)
+        // 2. window.innerHeight (次之)
+        // 3. document.documentElement.clientHeight (fallback)
+        if (typeof window === 'undefined')
+            return 0;
+        let height = window.innerHeight;
+        // 优先使用 visualViewport
+        if (window.visualViewport) {
+            height = window.visualViewport.height;
+        }
+        // 验证高度合理性
+        if (height <= 0 || height > window.screen.height) {
+            height = window.innerHeight;
+        }
+        // 最终 fallback
+        if (height <= 0) {
+            height = document.documentElement.clientHeight;
+        }
+        return height;
+    };
+    const updateHeight = useCallback(() => {
+        var _a;
+        const visibleHeight = getVisibleContentHeight();
+        const screenHeight = (_a = window.screen) === null || _a === void 0 ? void 0 : _a.height;
+        const ua = navigator.userAgent;
+        // Instagram 检测
+        const isInstagram = /Instagram/i.test(ua);
+        // Facebook 检测
+        const isFacebook = /FBAV|FBAN|FBSN/i.test(ua);
+        // 安全检查
+        if (!screenHeight || visibleHeight <= 0 || (!isInstagram && !isFacebook)) {
+            setVisibleHeight(visibleHeight);
+            return;
+        }
+        const ratio = visibleHeight / screenHeight;
+        const threshold = 0.9;
+        const h = screenHeight >= 900 ? screenHeight * 0.8 : screenHeight * 0.79;
+        // 当内容高度占屏幕高度90%以上时，使用按比例计算的高度
+        // 否则使用实际内容高度
+        const isRatio = ratio >= threshold && ratio !== 1;
+        const finalHeight = isRatio ? Math.round(h) : visibleHeight;
+        if (isRatio) {
+            setBottomHeight(screenHeight - Math.round(h));
+        }
+        else {
+            setBottomHeight(0);
+        }
+        if ('fundebug' in window) {
+            const systemInfo = {
+                ratio,
+                h,
+                finalHeight,
+                visibleHeight,
+                screenHeight,
+                isInstagram,
+                isFacebook,
+                ua
+            };
+            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
+        }
+        setVisibleHeight(finalHeight);
+    }, [getVisibleContentHeight]);
+    useEffect(() => {
+        // 初始计算
+        updateHeight();
+        // 事件监听
+        const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
+        events.forEach((event) => {
+            window.addEventListener(event, updateHeight);
+        });
+        // visualViewport 监听（最重要）
+        if (window.visualViewport) {
+            window.visualViewport.addEventListener('resize', updateHeight);
+            window.visualViewport.addEventListener('scroll', updateHeight);
+        }
+        // 键盘弹出/收起监听（移动端重要）
+        if ('virtualKeyboard' in navigator) {
+            navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
+        }
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, updateHeight);
+            });
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', updateHeight);
+                window.visualViewport.removeEventListener('scroll', updateHeight);
+            }
+            if ('virtualKeyboard' in navigator) {
+                navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
+            }
+        };
+    }, [updateHeight]);
+    return { visibleHeight, bottomHeight };
+}
+
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2023-11-02 18:34:34
@@ -10314,15 +10414,17 @@ var CommodityGroup$1 = memo(CommodityGroup);
  *
  */
 const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
+const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight, isFullScreen = false, openState }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    const { visibleHeight, bottomHeight } = useVisibleHeight();
     const touchRef = useRef(null);
     const fTouchRef = useRef(null);
     const touchMoveRef = useRef(null);
     const ref = useRef(null);
     const modalRef = useRef(null);
-    const MODAL_DEF_TRANS = fullHeight * 0.2;
-    const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
+    const modalHeight = fullHeight || visibleHeight;
+    const MODAL_DEF_TRANS = modalHeight * 0.2;
+    const MODAL_DEF_CON_H = isFullScreen ? modalHeight : modalHeight * 0.8;
     const [modalTrans, setModalTrans] = useState(MODAL_DEF_TRANS);
     const [isShow, setIsShow] = useState(false);
     const modalEleRef = useRef(null);
@@ -10370,17 +10472,17 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
     }, [_popup, openState, globalConfig, schema]);
     useEffect(() => {
         const trapFocus = (element) => {
-            var focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
-            var firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
-            var lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
-            var KEYCODE_TAB = 9;
+            const focusableEls = element === null || element === void 0 ? void 0 : element.querySelectorAll('[role="button"],a, a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+            const firstFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[0];
+            const lastFocusableEl = focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls[(focusableEls === null || focusableEls === void 0 ? void 0 : focusableEls.length) - 1];
+            const KEYCODE_TAB = 9;
             element.addEventListener('keydown', function (e) {
                 if (e.key === 'Escape' || e.key === 'Esc') {
                     // 在这里执行按下 Esc 键时的操作
                     handleClose();
                     e.preventDefault();
                 }
-                var isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
+                const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB;
                 if (!isTabPressed) {
                     return;
                 }
@@ -10462,12 +10564,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
         }
         touchMoveRef.current = false;
     };
-    return ReactDOM.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
+    return ReactDOM.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)', bottom: bottomHeight + 'px' }, modalStyle), onClick: handleClose },
         React.createElement("div", { style: {
                 position: 'relative',
                 left: `${(_d = (_c = (_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.popupBg) === null || _c === void 0 ? void 0 : _c.horizontalMargin) !== null && _d !== void 0 ? _d : 0}px`,
                 right: `${(_h = (_g = (_f = (_e = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.popupBg) === null || _g === void 0 ? void 0 : _g.horizontalMargin) !== null && _h !== void 0 ? _h : 0}px`,
-                bottom: `${(_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0}px`,
+                bottom: `${((_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0) + bottomHeight}px`,
                 overflow: 'hidden',
                 width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
                 height: '100%'
@@ -10483,7 +10585,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 onTouchEnd: handleTouchEnd
             })),
                 React.createElement("div", Object.assign({ id: 'modal-content', ref: ref, style: {
-                        height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                        height: isScrollFullScreen ? modalHeight : MODAL_DEF_CON_H,
                         overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden',
                         zIndex: 1
                     } }, (((_z = (_y = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _y === void 0 ? void 0 : _y.props) === null || _z === void 0 ? void 0 : _z.enableFixedCloseButton) && {
@@ -18118,7 +18220,7 @@ const mountVideoPlayerAtNode = (() => {
     };
 })();
 
-const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
+const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef, visibleHeight }, ref) => {
     var _a, _b;
     const [isPauseVideo, setIsPauseVideo] = useState(false);
     const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
@@ -18226,7 +18328,7 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
             const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
             const ctx = canvas.getContext('2d');
             const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
-            const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+            const targetHeight = visibleHeight || (window === null || window === void 0 ? void 0 : window.innerHeight);
             canvas.height = targetHeight;
             canvas.width = targetWidth;
             ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
@@ -18236,7 +18338,7 @@ const VideoWidget$4 = forwardRef(({ rec, index, height, data, muted, activeIndex
         setTimeout(() => {
             setFrameImg();
         }, 500);
-    }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
+    }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur, visibleHeight]);
     const handleLoadedmetadata = useCallback(() => {
         if (!videoRef.current)
             return;
@@ -18978,148 +19080,6 @@ const NavBack = ({ data, minusHeight, tagHeight, onClick }) => {
 };
 var NavBack$1 = memo(NavBack);
 
-const useVisibleHeight = () => {
-    var _a, _b;
-    const [visibleHeight, setVisibleHeight] = useState(0);
-    const getDvhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100dvh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getVhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100vh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getFillAvailableInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '-webkit-fill-available';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
-    const getHeightWithSafeArea = () => {
-        const root = document.documentElement;
-        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-        // 处理可能的值（可能是 '0px', '34px' 等）
-        const numericValue = parseInt(value) || 0;
-        return numericValue;
-    };
-    const dvhToPx = (dvh) => {
-        return Math.round((dvh / 100) * document.documentElement.clientHeight);
-    };
-    // 检测是否启用了系统字体缩放
-    const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    const isScaled = fontSize !== 52; // 默认 1rem = 16px
-    // 检测是否处于 Display Zoom 模式（通过屏幕宽高比间接判断）
-    const isZoomed = screen.width <= 375 && screen.height <= 667 && window.devicePixelRatio < 3;
-    const systemInfo = {
-        visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-        innerHeight: window.innerHeight,
-        clientHeight: document.documentElement.clientHeight,
-        screenHeight: window.screen.height,
-        bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-        agent: navigator.userAgent,
-        version: '1.19.17',
-        safeArea: getHeightWithSafeArea(),
-        dvh: dvhToPx(100),
-        dvhInPx: getDvhInPx(),
-        vhInPx: getVhInPx(),
-        fillAvailableInPx: getFillAvailableInPx(),
-        isScaled,
-        isZoomed,
-        meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
-    };
-    console.log(systemInfo, 'fundebug-init--------------------->systemInfo');
-    if ('fundebug' in window) {
-        window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'init', { metaData: { systemInfo, otherInfo: {} } });
-    }
-    const updateHeight = useCallback(() => {
-        var _a, _b, _c;
-        const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-        const isScaled = fontSize !== 52; // 默认 1rem = 16px
-        const systemInfo = {
-            visualViewport: (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height,
-            innerHeight: window.innerHeight,
-            clientHeight: document.documentElement.clientHeight,
-            screenHeight: window.screen.height,
-            bodyHeight: (_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight,
-            agent: navigator.userAgent,
-            version: '1.19.17',
-            safeArea: getHeightWithSafeArea(),
-            dvh: dvhToPx(100),
-            dvhInPx: getDvhInPx(),
-            vhInPx: getVhInPx(),
-            fillAvailableInPx: getFillAvailableInPx(),
-            isScaled,
-            isZoomed,
-            meta: `${window === null || window === void 0 ? void 0 : window.Instagram}，${window === null || window === void 0 ? void 0 : window.Facebook}`
-        };
-        console.log(systemInfo, 'fundebug-resize--------------------->systemInfo');
-        if ('fundebug' in window) {
-            window === null || window === void 0 ? void 0 : window.fundebug.notify('Collect_Info', 'resize', { metaData: { systemInfo, otherInfo: {} } });
-        }
-        const height = ((_c = document === null || document === void 0 ? void 0 : document.documentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) || (window === null || window === void 0 ? void 0 : window.innerHeight);
-        setVisibleHeight(height);
-    }, [getHeightWithSafeArea, dvhToPx, getDvhInPx, getVhInPx, getFillAvailableInPx]);
-    useEffect(() => {
-        // 初始计算
-        updateHeight();
-        // 事件监听
-        const events = ['resize', 'orientationchange', 'load', 'DOMContentLoaded'];
-        events.forEach((event) => {
-            window.addEventListener(event, updateHeight);
-        });
-        // visualViewport 监听（最重要）
-        if (window.visualViewport) {
-            window.visualViewport.addEventListener('resize', updateHeight);
-            window.visualViewport.addEventListener('scroll', updateHeight);
-        }
-        // 键盘弹出/收起监听（移动端重要）
-        if ('virtualKeyboard' in navigator) {
-            navigator.virtualKeyboard.addEventListener('geometrychange', updateHeight);
-        }
-        // 定期检查（应对某些特殊情况）
-        const interval = setInterval(updateHeight, 1000);
-        return () => {
-            events.forEach((event) => {
-                window.removeEventListener(event, updateHeight);
-            });
-            if (window.visualViewport) {
-                window.visualViewport.removeEventListener('resize', updateHeight);
-                window.visualViewport.removeEventListener('scroll', updateHeight);
-            }
-            if ('virtualKeyboard' in navigator) {
-                navigator.virtualKeyboard.removeEventListener('geometrychange', updateHeight);
-            }
-            clearInterval(interval);
-        };
-    }, [updateHeight]);
-    return visibleHeight;
-};
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
@@ -19128,7 +19088,7 @@ const useVisibleHeight = () => {
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
-const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
+const SxpPageRender = ({ globalConfig, descStyle, containerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, hashTagRightMargin, tagList = [], defaultData }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
@@ -19148,7 +19108,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const fbcRef = useRef('');
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5, pixelPvStatusRef } = useSxpDataSource();
     const { backMainFeed, productView, jumpToWeb } = useEventReport();
-    const visibleHeight = useVisibleHeight();
+    const { visibleHeight, bottomHeight } = useVisibleHeight();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -19317,29 +19277,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         return minusHeight;
     }, [globalConfig]);
-    const getHeightWithSafeArea = () => {
-        const root = document.documentElement;
-        const value = getComputedStyle(root).getPropertyValue('--safe-area-inset-bottom');
-        // 处理可能的值（可能是 '0px', '34px' 等）
-        const numericValue = parseInt(value) || 0;
-        return numericValue;
-    };
-    const getDvhInPx = () => {
-        const detector = document.createElement('div');
-        detector.style.position = 'fixed';
-        detector.style.bottom = `${getHeightWithSafeArea()}px`;
-        detector.style.left = '0';
-        detector.style.height = '100dvh';
-        detector.style.visibility = 'hidden';
-        detector.style.zIndex = '-1';
-        document.body.appendChild(detector);
-        const dvhInPx = detector.clientHeight;
-        document.body.removeChild(detector);
-        return dvhInPx;
-    };
     const height = useMemo(() => {
-        return getDvhInPx() - minusHeight - tagHeight - getHeightWithSafeArea();
-    }, [minusHeight, visibleHeight, tagHeight, getHeightWithSafeArea, containerHeight, getDvhInPx]);
+        const h = containerHeight || visibleHeight;
+        return h - minusHeight - tagHeight;
+    }, [containerHeight, visibleHeight, minusHeight, tagHeight]);
     const visList = useMemo(() => {
         var _a;
         const list = activeIndex === 0 && !waterFallData && !isEditor && !isDiyH5
@@ -19381,7 +19322,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
         }
         if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
-            return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
+            return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef, visibleHeight: visibleHeight })));
         }
         if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
             return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -19408,7 +19349,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         tipText,
         resolver,
         schema,
-        isReload
+        isReload,
+        visibleHeight
     ]);
     const onExpandableChange = useCallback((v) => {
         setIsShowMore(v);
@@ -19481,7 +19423,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             top += minusHeight;
         }
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconYPosit) !== 'top') {
-            top += getHeightWithSafeArea();
+            top += bottomHeight;
         }
         if (rec === null || rec === void 0 ? void 0 : rec.video) {
             return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
@@ -19491,7 +19433,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 }, position: index }));
         }
         return null;
-    }, [globalConfig, waterFallData]);
+    }, [globalConfig, waterFallData, bottomHeight]);
     const handleViewImageStartEnd = (item) => {
         var _a, _b, _c, _d, _e, _f;
         if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
@@ -19718,7 +19660,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             top += minusHeight;
         }
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== 'top') {
-            top += getHeightWithSafeArea();
+            top += bottomHeight;
         }
         return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
                 position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
@@ -19728,7 +19670,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
                 [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: top
             }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })));
-    }, [globalConfig, visList, activeIndex, isMuted, waterFallData]);
+    }, [globalConfig, visList, activeIndex, isMuted, waterFallData, bottomHeight]);
     const renderView = useMemo(() => {
         if (loading) {
             return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -19760,7 +19702,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         isReload,
         renderToggleButton
     ]);
-    return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
+    return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { height } },
         (data === null || data === void 0 ? void 0 : data.length) < 1 && loading ? (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
             React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { style: Object.assign({}, ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) && { textUnderlineOffset: `${globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset}px` })) },
             waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff', top: `${minusHeight}px` }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
@@ -19822,10 +19764,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))),
             React.createElement(WaterFall$1, Object.assign({}, (_u = (_t = (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.item) === null || _u === void 0 ? void 0 : _u.props)),
             React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
-            openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: 'var(--safe-area-inset-bottom,0px)' } }))))),
+            openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0, bottom: bottomHeight + 'px' } }))))),
         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableCookieSetting) && (React.createElement("div", { style: {
                 position: 'fixed',
-                bottom: 'var(--safe-area-inset-bottom,0px)',
+                bottom: bottomHeight + 'px',
                 left: 0,
                 right: 0,
                 width: '100%',