Почему Chrome и IE отображают баннеры разных размеров от Firefox?

Question

Я заполнил веб-сайт (используя Firefox в качестве браузера по умолчанию при разработке), но после тестирования этого в разных браузерах я вижу, что раздел с раздвижными баннерами веб-сайта отображается в неправильных пропорциях в Chrome или IE.

Не только это, но и ключевые кадры, которые я использую для скольжения изображений, приводят к тому, что половина изображений вынимается с экрана. Хотя я думаю, что это может быть связано с реальными настройками размеров контейнера для слайд-шоу?

Вот мой код, который относится к разделу баннера:

#homepage-banner {
    width: 100%;
    position: relative;
    justify-content: space-around;
    height: 82vh;
    overflow: hidden;
}

.homepage-slider img {
    display: inline-block;
    cursor: pointer;
}

.homepage-slider {
    top: 3.5em;
    width: 500%;
    position: absolute;
    display: flex;
    animation: 24s slider infinite;
}

.homepage-slider:hover {
    animation-play-state: paused;
}

@keyframes slider {
    0%, {
        left: 0%;
    }

    23% {
        left: 0%;
    }

    25% {
        left: -100%;
    }

    48% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    73% {
        left: -200%
    }

    75% {
        left: -300%;
    }

    98% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

<section id="homepage-banner">

    <div class="homepage-slider">
        <img class="freezeslideshow" id="slideImageOne" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageTwo" src="images/hero-banner/plant-protein.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageThree" src="images/hero-banner/image5.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFour" src="images/hero-banner/imaged3.jpg" alt="Protein Deals" />
        <img class="freezeslideshow" id="slideImageFive" src="images/hero-banner/mfprotein.jpg" alt="Protein Deals" />
    </div>

</section>

Первый снимок экрана показывает, что отображает Firefox, а второй показывает то, что отображают Chrome и IE.

Как я могу обрабатывать такого рода префиксы в целом? Правильно ли я предполагаю, думая, что это связано с префиксами?

Answer 1

Полагаю, это связано с тем, что вы используете относительные единицы измерения, например vh и em. В целом это хорошая идея, но они не будут одинаковыми для разных браузеров и размеров экрана.

he vh единица - это буквально процент от «высоты просмотра», которая является видимым размером веб-сайта. Таким образом, 82vh означает 82% видимого размера экрана, поэтому, если вы хотите изменить размер окна по вертикали, это поле также изменит размер, чтобы сохранить этот процентный размер. Это означает, что если у кого-то есть панель инструментов браузера, показывающая, что размер видимого веб-сайта изменяется, это поле будет иметь другой размер.

Если вы хотите, чтобы эти размеры были одинаковыми во всех браузерах, используйте вместо них пиксели.

(PS: я использую MP Assault для своей предварительной тренировки, это здорово!: P)

Answer 2

Я бы предложил вам использовать transform свойство вместо абсолютного позиционирования.
Таким образом, ваша анимация будет воспроизводиться в слое композиции.

Тогда ваш код можно упростить так:

#homepage-banner {
  position: relative;
  width: 100%;
  height: 82vh;
  overflow: hidden;
}

.homepage-slider img {
  width: 20%; 
  cursor: pointer;
}

.homepage-slider {
  display:flex;
  width: 500%;
  animation: 24s slider infinite;
}

.homepage-slider:hover {
  animation-play-state: paused;
}

@keyframes slider {
  0%,
  {
    transform: translateX(0)
  }
  23% {
    transform: translateX(0)
  }
  25% {
    transform: translateX(-20%)
  }
  48% {
    transform: translateX(-20%)
  }
  50% {
    transform: translateX(-40%)
  }
  73% {
    transform: translateX(-40%)
  }
  75% {
    transform: translateX(-60%)
  }
  98% {
    transform: translateX(-60%)
  }
  100% {
    transform: translateX(-80%)
  }
}

<section id="homepage-banner">

  <div class="homepage-slider">
    <img class="freezeslideshow" id="slideImageOne" src="https://picsum.photos/800/200?1" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageTwo" src="https://picsum.photos/800/200?2" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageThree" src="https://picsum.photos/800/200?3" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageFour" src="https://picsum.photos/800/200?4" alt="Protein Deals" />
    <img class="freezeslideshow" id="slideImageFive" src="https://picsum.photos/800/200?5" alt="Protein Deals" />
  </div>

</section>

Answer 3

Добавление width: 20%; к .homepage-slider img должно исправить вашу проблему. В настоящее время ничто не говорит вашим изображениям, насколько они велики. Кроме того, вы можете установить этот контейнер на display: flex; и дать изображения flex: 1;. Это будет на одну строку меньше для обновления, если вы измените количество изображений в карусели.

Answer 4

Можете ли вы попробовать добавить следующий CSS к вашему img: max-width: 100%?