macOS Big Sur Safari调用animateIntro报undefined错误如何修复

• macOS Big Sur 版本的 Safari 对 JS 异步执行时序、ES 类内部的 this 绑定处理逻辑与 Chromium/Firefox 内核存在差异，你遇到的报错核心原因是执行 this.headerHomepage.animateIntro() 时，this.headerHomepage 处于未定义状态
• 报错后代码中断执行，因此 preloader-done 类无法被正常添加到 body 标签上

你可以直接替换对应代码片段，核心修改点为：提前获取headerHomepage变量、添加调用前的安全校验、避免this指向异常的影响，修改后代码如下：

new class {
        constructor(t) {
            // 提前获取headerHomepage，避免异步时序问题
            this.headerHomepage = t.monoPages.headerHomepage;
            var e = $$("#preloader")
              , i = t.lottie.loadAnimation({
                name: e,
                container: e,
                renderer: "svg",
                loop: !1,
                autoplay: !1,
                path:  "themes/sailor/js/preloader.json"
            });
            i.addEventListener("data_ready", (r=>{
                t.lottie.play(e),
                TweenMax.to($$("#preloader"), .1, {
                    css: {
                        opacity: "0"
                    },
                    onComplete: ()=>{
                        $$("body").classList.add("loaded"),
                        t.monoReveals.startObserve(!1),
                        t.monoReveals.initLinesReveals(),
                        t.monoRevealsWords.startObserve(!1),
                        TweenMax.fromTo($$("#transition"), 1.2, {
                            scaleY: 1,
                            transformOrigin: "50% 100%",
                            backgroundColor: "#434A7F"
                        }, {
                            scaleY: 0,
                            backgroundColor: "#191919",
                            onComplete: ()=>{
                                this.onPreloaderDone(),
                                i.destroy()
                            }
                            ,
                            ease: Expo.easeOut
                        })
                    }
                    ,
                    delay: 2.6,
                    ease: Expo.ease
                })
            }
            ))
        }
        onPreloaderDone() {
            const isHome = "home" == $$(".mono-container").getAttribute("data-page");
            // 添加安全校验，只有方法存在时才调用
            if (isHome && this.headerHomepage && typeof this.headerHomepage.animateIntro === 'function') {
                this.headerHomepage.animateIntro();
            } 
            // 无论是否是首页，都执行导航元素的显示逻辑，保证preloader-done类能被添加
            TweenMax.to(".menu.menu--main", .6, { 
                opacity: 1,
                y: 0,
                ease: Power2.easeOut
            });
            TweenMax.to(".top.top--main", .6, {
                opacity: 1,
                y: 0,
                ease: Power2.easeOut,
                onComplete: ()=>{
                    $$("body").classList.add("preloader-done")
                }
            });
        }
    }
    ({
        lottie: uh,
        monoReveals: dh,
        monoRevealsWords: fh,
        gravThemeUrl: ch,
        monoPages: yh
    })
}
]);

修改后可在对应环境验证以下逻辑正常：

• macOS Big Sur Safari 不再抛出该 TypeError
• 首页的头部入场动画正常执行
• 所有页面的 body 标签均会被添加 preloader-done 类
• 非首页的顶部导航、主菜单的淡入效果正常触发

内容的提问来源于stack exchange，提问作者Dinesh