使用 firebase 托管的网站没有正确加载 AOS

Question

我有个小问题。所以我用 firebase 托管了我的网站，并使用 NPM 安装了 AOS。在某些浏览器上它可以工作（例如在 PC 上它可以与 Chrome 一起工作，但现在可以与 Microsoft Edge 一起工作）在我的 iPhone 上，首先它在 safari 上工作，然后在 Chrome 上工作，但现在不再工作了（即使我没有改变任何东西。）

AOS 有时没有加载。

什么时候工作是这样的：

不工作时看起来像这样：

这是没有加载的部分的代码，这里我导入了 AOS（我用 NPM 安装）。但是有时会加载，有时不会。哪个是问题？ Firebase 无法与所有用户共享资源？

import AOS from "aos";
import "aos/dist/aos.css";

export default function Despre() {
    window.addEventListener('load', () => {
        AOS.init({
            duration: 1000,
            easing: 'ease-in-out',
            once: true,
            mirror: false
        })
    });
    return (
        <section id="about" class="about">
        <div class="container">

            <div class="section-title" data-aos="zoom-out">
                <h2>Despre noi</h2>
                <p>Cine suntem?</p>
            </div>

            <div class="row content" data-aos="fade-up">
                <div class="col-lg-6">
                    <p>
                        Localizați în localitatea Galați, dorim să vă oferim o nuntă ca în povesți, atât mirilor cât și invitaților acestora.
                    </p>
                    <ul>
                    <li><i class="ri-check-double-line"></i> Porumbeii pe care îi oferim sunt de culoare alb imaculat, fiind foarte curați.</li>
                        <li><i class="ri-check-double-line"></i> Porumbeii au fost folosiți ca simboluri de secole, având o simbolistică vastă!</li>
                        <li><i class="ri-check-double-line"></i> Aceștia simbolizează, printre altele, pacea, liniștea și iubirea!</li>
                    </ul>
                </div>
                <div class="col-lg-6 pt-4 pt-lg-0">
                    <p>
                        Momentul artistic al eliberării porumbeilor poate fi la ieșirea mirilor din biserică, la ieșirea de la Oficiul Stării Civile sau înainte de intrarea în localul în care va avea loc evenimentul. Momentul eliberării porumbeilor va fi ales de dumneavoastră!
                    </p>
                    <div class="d-flex justify-content-center">
                        <i class="fa-solid fa-dove fa-4x" id="porumbel"></i>
                    </div>
                </div>
            </div>

        </div>
    </section>
    );
}

感谢您的帮助！

Answer 1

我遇到了同样的问题。在 safari 动画中不起作用。我使用控制台从官方 AOS 演示站点下载了脚本 (link)，并将相同的初始化添加到站点的页脚。