CSS Проблемы с прокруткой Marquee в IE11 - PullRequest
Новая
       27

CSS Проблемы с прокруткой Marquee в IE11

0 голосов
/ 10 января 2020

Я получил прокрутку, похожую на ту, что есть у Apple на их странице Apple Arcade в нижней части страницы. https://www.apple.com/apple-arcade/

Я все заработал, но в ie 11 он действительно медленный и не циклично проходит весь шатер, как в другом браузере. Я пытался достичь этого просто с помощью CSS, но, возможно, это не возможно для ie11, или я просто что-то упустил?

Код Ссылка пера: https://codepen.io/devi8/pen/89e45e26d38f173d87993e167a5f4695

<style>
.marquee--container {
  width: 100%;
  padding: 1em;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.marquee--content {
  display: flex;
}

.scroll {
  animation: scroll 20s linear infinite;
}

.scroll.reverse {
  animation-direction: reverse;
}

.marquee--content:hover {
  animation-play-state: paused;
}

.marquee--item {
  display: block;
  margin: 0 .6rem;
  transition: all 0.2s ease;
}

.marquee--item:hover {
  background: rgba(255,255,255,0.5);
  transform: scale(1.03);
  cursor: pointer;
}

.marquee--item img {
  border-radius: 1rem;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>

<section class="marquee--container">
  <div class="marquee--content scroll">
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=01" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=02" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300.jpg/f00/fff?text=03" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=04" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=05" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300.jpg/1CACF4/fff?text=06" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=01" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=02" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300.jpg/f00/fff?text=03" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=04" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300?text=05" alt="image">
    </article>
    <article class="marquee--item">
       <img src="https://via.placeholder.com/600x300.jpg/1CACF4/fff?text=06" alt="image">
    </article>
  </div>
</section>

1 Ответ

1 голос
/ 10 января 2020

Вместо дисплея: flex, чтобы держать все в одной строке, вы можете использовать display: хорошо реализована таблица / ячейка таблицы:

https://jsbin.com/cobiyugafo/1/edit (runing & редактируемый из Inte rnet Explorer 11) 

.marquee--container {
  width: 100%;
  padding: 1em;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  min-width:0;
}

.marquee--content {
  display: table; /* <=== here */
  border-spacing:  0.6rem 0;
}

.scroll {
  animation: scroll 20s linear infinite;
}

.scroll.reverse {
  animation-direction: reverse;
}

.marquee--content:hover {
  animation-play-state: paused;
}

.marquee--item {
  display: table-cell; /* <=== here */
  /* margin replaced by border-spacing */
  transition: all 0.2s ease;
}

.marquee--item:hover {
  background: rgba(255,255,255,0.5);
  transform: scale(1.03);
  cursor: pointer;
}

.marquee--item img {
  border-radius: 1rem;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
...