Firefox: ширина контейнера для изображения рассчитана неправильно (обновление 1) - PullRequest
Новая
       22

Firefox: ширина контейнера для изображения рассчитана неправильно (обновление 1)

2 голосов
/ 04 февраля 2020

Я создал инструмент chapterscoller для видеопроигрывателя.

Chapterscroller должен позволять вам прокручивать список глав по горизонтали. Каждая глава представлена ​​миниатюрным изображением, номером и информацией о времени. Поскольку изображения меняются в зависимости от содержимого, их фактическое разрешение и соотношение сторон на данный момент неизвестны. Чтобы сохранить соотношение сторон, я установил height: 100%; и width: auto; на изображении. Элемент контейнера для всех глав использует display: flex; и flex-direction: row;. Выбранная в данный момент глава будет помечена классом 'active-element' и, следовательно, будет немного больше других.

Хотя инструмент уже работает, как и в других браузерах, я заметил странную поведение в последних Firefox (возможно, это также в более ранних версиях).

Только на Firefox (для настольных и мобильных компьютеров) ширина контейнера, используемого для изображения, номер и время не установлены на фактическая ширина рендеринга изображения, но с внутренней c шириной исходного изображения элементов изображения (в данном случае 2000px). Я также подготовил jsfiddle для демонстрации: https://jsfiddle.net/vsx_sieber/29wv4o0m/4/

Это код HTML: 

<div style="height: 25%;" class="chapterscroller">
  <div class="chapterscroller-container">
    <!-- Chapter 1 element -->
    <div class="chapterscroller-thumbnail" aria-disabled="false">
      <img src="https://i.imgur.com/2Z3qPjo.png">
      <div class="slideNumber">1 / 10</div>
      <div class="time">0:00 - 9:59</div>
    </div>
    <!-- Chapter 2 element (also the active element) -->
    <div class="chapterscroller-thumbnail active-thumbnail" aria-disabled="false">
      <img src="https://i.imgur.com/2Z3qPjo.png">
      <div class="slideNumber">2 / 10</div>
      <div class="time">10:00 - 19:59</div>
    </div>
    <!-- Any number of more chapter elements here -->
    <!-- Chapter X element -->
    <div class="chapterscroller-thumbnail" aria-disabled="false">
      <img src="https://i.imgur.com/2Z3qPjo.png">
      <div class="slideNumber">X / 10</div>
      <div class="time">XX:XX - XX:XX</div>
    </div>
  </div>
</div>

А вот CSS: 

.chapterscroller {
  font-size: 0.5em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3em;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(34, 34, 40, 1));

  width: 100%;
  min-height: 70px;
  max-height: 20%;
}

.chapterscroller-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
}

.chapterscroller-thumbnail {
  position: relative;

  display: inline-block;

  margin: auto 1px;

  cursor: pointer;

  height: 100%;
  height: calc(80% - 4px);

  width: auto;

  color: #000;
  font-size: 1.2em;
  text-shadow: 0em 0em 0.3em #fff;
}

.chapterscroller-thumbnail:hover {
  height: calc(90% - 4px);
}

.chapterscroller-thumbnail.active-thumbnail {
  height: calc(100% - 4px);
}

.time {
  position: absolute;
  display: inline-block;
  bottom: 0;
  left: 0;
  padding: 5%;
  width: 100%;
  white-space: nowrap;
  font-weight: bold;
}

.slideNumber {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  padding: 5%;
  width: 100%;
  white-space: nowrap;
  font-size: 1.6em;
}

img {
  height: 100%;
  width: auto;
  float: left;
}

Обратите внимание, что на последних Chrome, IE11 и Opera все работает так, как ожидалось. Только Firefox имеет эту проблему.

Это ошибка в Firefox или я что-то здесь упускаю?

ОБНОВЛЕНИЕ:

Мне удалось в некоторой степени решить проблему, изменив расположение контейнера chapterscroller с position: absolute; left: 0; right: 0; top: 0; bottom: 0; на position: relative; width: 100%; height 100%.

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

Я создал новый JSFiddle: https://jsfiddle.net/vsx_sieber/29wv4o0m/17/

...