Блог

Как уже упоминалось в названии, анимация в Safari (15.1) не запускается.

Я создал простую анимацию загрузчика при загрузке файла, для свойства отображения родительского div установлено значение » нет «при загрузке страницы, затем после успешной проверки формы свойство возвращается в значение «блокировать». Эта функция, похоже, работает в каждом браузере, кроме Safari. После отправки формы страница загружается, и если я отменю процесс загрузки в браузере, анимация волшебным образом начнет работать просто отлично.

Итак, мой вопрос: почему анимация не запускается, когда это должно быть?

CSS:

 .load-dots {
    position: relative;
}

.load-dot {
    position: absolute;
    top: -30px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: turquoise;
    animation: move-dot 1s ease infinite;
    transform-origin: center center;
}

.load-dot:nth-child(1) {
    left: -60px;
    animation-delay: .1s;
}

.load-dot:nth-child(2) {
    left: -30px;
    animation-delay: .2s;
}

.load-dot:nth-child(3) {
    left: 0px;
    animation-delay: .3s;
}

.load-dot:nth-child(4) {
    left: 30px;
    animation-delay: .4s;
}

.load-dot:nth-child(5) {
    left: 60px;
    animation-delay: .5s;
}

@keyframes move-dot {
    0% {
        transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }

    50% {
        transform: translate(0, 50px) scale(.4);
        opacity: .5;
        background-color: navy;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }
}

@-webkit-keyframes move-dot {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }

    50% {
        -webkit-transform: translate(0, 50px) scale(.4);
        opacity: .5;
        background-color: navy;
    }

    100% {
        -webkit-transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }
}

@-moz-keyframes move-dot {
    0% {
        -moz-transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }

    50% {
        -moz-transform: translate(0, 50px) scale(.4);
        opacity: .5;
        background-color: navy;
    }

    100% {
        -moz-transform: translate(0, 0);
        opacity: 1;
        background-color: aqua;
    }
}
 

HTML:

 <section id="upload-image">
    <form action="/upload" method="POST" enctype="multipart/form-data" class="needs-validation" onclick="validate()"
      novalidate>
      <div class="mx-auto input-group mt-3 px-3 px-md-0" style="max-width: 480px">

        <span class="input-group-text" id="basic-addon1">
          <i class="bi bi-image"></i>
        </span>
        <input id="file-select" type="file" name="file" accept="image/png, image/gif, image/jpeg, image/jpg"
          class="form-control" aria-label="file-upload" aria-describedby="basic-addon1" required />
        <button class="btn btn-upload" type="submit" id="upload-button">Upload</button>
        
        <div class="valid-feedback" id="validation-message">
          Uploading image...
        </div>
      </div>
    </form>

    <div class="load-dots loader-animation mx-auto position-relative">
      <div class="load-dot"></div>
      <div class="load-dot"></div>
      <div class="load-dot"></div>
      <div class="load-dot"></div>
      <div class="load-dot"></div>

    </div>
  </div>
</section>
 

JavaScript:

 <script>
  (function () {
    'use strict'

    const forms = document.querySelectorAll('.needs-validation')

    Array.from(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          } else {
            var loader = document.querySelector(".load-dots");
            loader.style.display = "block";

            document.querySelector("#validation-message").style.display = "block";
            document.body.style.cursor = 'wait'
            document.querySelector("#upload-button").disabled = true
          }

          form.classList.add('was-validated')
        }, false)
      })
  })()
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelector("#validation-message").style.display = "none";
    document.querySelector(".load-dots").style.display = "none";
  });
</script>