Question

目前我在一个网站上工作，当用户进入页面时，我有一个无限大动画。现在，在我的电脑（谷歌浏览器）和我的手机（野生动物园），动画看起来很好，行为正确。但是，当我试图从朋友的三星Galaxy S8进入网站时，网站开始出现故障。

该网站的网址为：website

当我在三星Galaxy上向下滚动页面时，顶部的动画总是占据焦点，因此无法向下滚动到页面的其余部分。

这是我的动画风格：

.static {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    top: -100px;
    opacity: 0.05;
    z-index: 230;
    user-select: none;
    user-drag: none;
}

.error {
    text-align: center;
    font-size: 95px;
    font-weight: 700;
    font-style: italic;
    text-align: center;
    width: 100%;
    height: 60px;
    letter-spacing: 3px;
    line-height: 60px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    animation: noise 2s linear infinite;
    overflow: default;
}

.error::after {
    content: 'Philanthropist';
    font-size: 95px;
    font-style: italic;
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    color: blue;
    animation: noise-1 .2s linear infinite;
}

.error::before {
    content: 'Philanthropist';
    font-size: 95px;
    font-style: italic;
    text-align: center;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    color: red;
    animation: noise-2 .2s linear infinite;
}

.info {
    text-align: center;
    font-size: 30px;
    font-style: italic;
    text-align: center;
    height: 60px;
    line-height: 60px;
    margin: auto;
    position: absolute;
    top: 200px;
    bottom: 0;
    left: 0;
    right: 0;
    animation: noise-3 1s linear infinite;
}

@media (max-width: 900px) {
    .error,
    .error:after,
    .error:before {
        font-size: 50px;
        padding-left: 40px;
    }

    .info {
        top: 140px;
    }
}

@media (max-width: 650px) {
    .error,
    .error::after,
    .error::before {
        font-size: 40px;
        padding-left: 50px;
    }
}

@media (max-width: 450px) {
    .error,
    .error::after,
    .error::before {
        font-size: 30px;
    }

    .error {
        top: -60px;        
    }

    .info {
        font-size: 20px;
    }

    #logo-section {
        .arrow {
            margin-bottom: 40px;
        }
    }
}

@keyframes noise-1 {
    0%,
    20%,
    40%,
    60%,
    70%,
    90% {
        opacity: 0;
    }
    10% {
        opacity: .1;
    }
    50% {
        opacity: .5;
        left: -6px;
    }
    80% {
        opacity: .3;
    }
    100% {
        opacity: .6;
        left: 2px;
    }
}

@keyframes noise-2 {
    0%,
    20%,
    40%,
    60%,
    70%,
    90% {
        opacity: 0;
    }
    10% {
        opacity: .1;
    }
    50% {
        opacity: .5;
        left: 6px;
    }
    80% {
        opacity: .3;
    }
    100% {
        opacity: .6;
        left: -2px;
    }
}

@keyframes noise {
    0%,
    3%,
    5%,
    42%,
    44%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
    4.3% {
        opacity: 1;
        transform: scaleY(1.7);
    }
    43% {
        opacity: 1;
        transform: scaleX(1.5);
    }
}

@keyframes noise-3 {
    0%,
    3%,
    5%,
    42%,
    44%,
    100% {
        opacity: 1;
        transform: scaleY(1);
    }
    4.3% {
        opacity: 1;
        transform: scaleY(4);
    }
    43% {
        opacity: 1;
        transform: scaleX(10) rotate(60deg);
    }
}

以下是该页面的标记：

<% include partials/header %>
    <link rel="stylesheet" href="/css/aos.css" />
    <link rel="stylesheet" href="/css/landing.css">

    <section id="logo-section">
        <div class="dark-overlay">
            <div class="container h-100">
                <div class="row h-100">
                    <div class="col d-flex flex-column justify-content-center text-center">
                        <div class="error">Philanthropist</div>
                        <br />
                        <br />
                        <span class="info">The Bedroom</span>
                        <a href="#music-section" class="arrow"></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="divider">
    </section>
    <!-- Music Section -->
    <section id="music-section" class="py-5">
        <div class="dark-overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="display-4 text-center" data-aos-once="true" data-aos-delay="500" data-aos="fade-down" data-aos-duration="900">Music</h2>
                        <iframe data-aos-once="true" data-aos-delay="500" data-aos="fade-up" data-aos-duration="1100" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/30328335&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=false"
                         width="70%" data-embed="true" frameborder="no" height="450"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section id="newsletter-section" class="text-dark">
        <div class="container">
            <div class="row">
                <div class="col-md-5 d-flex flex-column mb-5 mx-auto">
                    <form action="/subscribe" method="POST">
                        <h3 class="mb-4 text-center mx-auto">Stay Tuned</h3>
                        <input type="text" class="form-control form-control-lg mb-3" name="name" placeholder="Name">
                        <input type="text" class="form-control form-control-lg mb-3" name="email" placeholder="Email">
                        <button class="btn btn-dark btn-lg btn-block">
                            Subscribe
                        </button>
                    </form>
                </div>
                <div class="col-md-5 mx-auto">
                    <h3 class="mb-4 text-center mx-auto">Follow</h3>
                    <div id="social-media" class="d-flex flex-row justify-content-center mb-0">
                        <a href="https://twitter.com/philanxy" class="mx-2 icon-button twitter" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
                         data-aos-once="true" target="_blank">
                            <i class="fa fa-twitter icon-twitter"></i>
                            <span></span>
                        </a>
                        <a href="https://www.facebook.com/philanxyxy/" class="mx-2 icon-button facebook" data-aos-delay="200" data-aos="fade-down"
                         data-aos-duration="800" data-aos-once="true" target="_blank">
                            <i class="fa fa-facebook icon-facebook"></i>
                            <span></span>
                        </a>
                        <a href="https://soundcloud.com/philanxy" class="mx-2 icon-button soundcloud" data-aos-delay="200" data-aos="fade-up" data-aos-duration="800"
                         data-aos-once="true" target="_blank">
                            <i class="fa fa-soundcloud icon-soundcloud"></i>
                            <span></span>
                        </a>
                        <a href="https://philanthropist.bandcamp.com/" class="mx-2 icon-button bandcamp" data-aos-delay="200"
                         data-aos="fade-down" data-aos-duration="800" data-aos-once="true" target="_blank">
                            <i class="fa fa-bandcamp icon-bandcamp"></i>
                            <span></span>
                        </a>
                        </ul>
                    </div>
                </div>
            </div>
    </section>

    <% include partials/footer %>

        <script type="text/javascript" src="/js/aos.js"></script>
        <script type="text/javascript" src="/js/landing.js"></script>
        <script type="text/javascript" src="/js/navbar-fixed.js"></script>

导致这种情况的原因是什么？

CSS Animation专注于三星s8

0 个答案: