Простая слайд-анимация не работает в некоторых установках Firefox и Safari, хотя на большинстве компьютеров она работает в обоих браузерах. - PullRequest
Новая
       36

Простая слайд-анимация не работает в некоторых установках Firefox и Safari, хотя на большинстве компьютеров она работает в обоих браузерах.

0 голосов
/ 05 мая 2020

У меня проблема с этим кодом. Он работает во всех браузерах, которые я установил, но не работает в Mozilla моих друзей и Safari других друзей. Это кажется довольно случайным. Они оба используют одну и ту же операционную систему, но у одного из них проблема в одном из этих браузеров, в то время как в другом он работает нормально. Я также проверил пару других компьютеров на работе, и все работает нормально.

Код является умным шаблоном, поэтому в этом коде есть условие, которое не делает ничего особенного, так как я изменил код. У меня нет опыта работы со Smarty и PHP, но я подумал, что это может быть проблемой.

Я использовал автоматический префикс, чтобы сделать его кроссбраузерным.

HTML_ 

.slide-jumbo{
  font-family: 'Bebas';
  width: inherit;
  height: inherit;
  background-color: #ee7f01;
  margin: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  color: white;
  
}

.animate-jumbo-slide{
    -webkit-animation: slideIn 8s infinite;
            animation: slideIn 8s infinite;
}

 .slide-jumbo-2{
  width: inherit;
  height: inherit;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  
}

.slide-jumbo-2 h2{
  margin: 0;
  
}

.slide-jumbo-2 button{
  width: auto;
}


.slider-jumbo-container{
    position: relative;
    width: 40vw;
    left: 10vw;
    overflow: hidden;
    top: 40%;
    display:
}

@-webkit-keyframes slideIn{
  0%   {-webkit-transform: translateX(100%);transform: translateX(100%)}
  30%   {-webkit-transform: translateX(100%);transform: translateX(100%)}
  40%  {-webkit-transform: translateX(0%);transform: translateX(0%)}
  90%  {-webkit-transform: translateX(0%);transform: translateX(0%)}
  100% {-webkit-transform: translateX(-100%);transform: translateX(-100%)}
}

@keyframes slideIn{
  0%   {-webkit-transform: translateX(100%);transform: translateX(100%)}
  30%   {-webkit-transform: translateX(100%);transform: translateX(100%)}
  40%  {-webkit-transform: translateX(0%);transform: translateX(0%)}
  90%  {-webkit-transform: translateX(0%);transform: translateX(0%)}
  100% {-webkit-transform: translateX(-100%);transform: translateX(-100%)}
}
{if $lista}
<div id="slider-area" class="owl-carousel" data-plugin-options='{literal}{"responsive": {"0": {"items": 1, "dots": true}, "480": {"items": 1, "dots": true}, "769": {"items": 1, "dots": false}, "992": {"items": 1, "dots": true}, "1200": {"items": 1, "dots": true}}, "nav" : false, "autoplaySpeed": 2000, "autoplayTimeout": 5000, "loop": false,"margin": 0}{/literal}'>
  {section name=slider loop=$lista}                
  <div class="slider-item" style="background-image:url('{$lista[slider].plik}')">
      <div class="slider-jumbo-container">
    <div class="slide-jumbo position-absolute animate-jumbo-slide">
        <h1>Title One</h1>
        <p>Text one</p>
        <a href="#" class="btn btn-primary">Click</a>
    </div>
    <div class="slide-jumbo-2">
        <h1>Title Two</h1>
        <p class="d-none d-md-block">Text Two</p>
        <a href="#" class="btn btn-primary">Click</a>
    </div>
  </div>
  </div> 
  {/section} 
</div>
{/if}

Спасибо за любую помощь :)

...