Пытаюсь сделать индикатор выполнения.

Вы могли подумать, что div с шириной 1%, увеличенный по горизонтали в 100 раз, будет охватывать ширину своего родителя, но это не так. Количество оставленных швов должно зависеть от размера моего окна, поэтому я думаю, что это может быть проблемой округления в браузере. Что я могу сделать, чтобы это сработало?

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

body {
  margin: 0;
  padding: 0;
}
#container {
  background-color: red;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  height: 100px;
}
#progress {
  position: absolute;
  left: 0;
  top: : 0;
  width: 1%;
  height: 100%;
  background-color: yellow;
  transform: scale(100, 1);
  transform-origin: left top;
}
<div id="container">
  <div id="progress">
  </div>
</div>

Я также сделал код, чтобы продемонстрировать эту проблему: http://codepen.io/bigblind/pen/Zbozjv

3
bigblind 27 Окт 2015 в 14:16

2 ответа

Лучший ответ

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

Да. Это.

Я не хочу каждый раз менять свойство ширины полосы

Я не пытаюсь обсуждать здесь производительность, а просто пытаюсь сконцентрироваться на проблеме: если не width, то какое свойство можно использовать?

Что ж, вы могли бы просто перевернуть свой прогресс с ног на голову. Вместо того, чтобы расширять div #progress, чтобы показать количество прогресса, сдвиньте его в сторону, чтобы показать фоновый div #container, чтобы показать количество прогресса. Используйте translate, чтобы отодвинуть прогресс.

В демонстрации ниже наведите указатель мыши на преобразование в действии.

Демо-скрипт: http://jsfiddle.net/abhitalks/y2o7yub9/1

Демо-фрагмент:

* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { width: 100%; }
#container{
    background-color: yellow; position: fixed;
    left: 0; right: 0; top: 0;
    height: 100px; width: 100%;
    overflow: hidden; white-space: nowrap;
}
#progress{
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: red;
    transform: translateX(0%); transition: transform 0.5s;
}
#container:hover > div { transform: translateX(100%); }
<div id="container">
  <div id="progress"></div>
</div>
3
Abhitalks 27 Окт 2015 в 11:47

Проблема

Мне кажется, что есть проблема с округлением.

На мониторе с разрешением 1920 пикселей 1% преобразуется в 19,188 пикселей, которые округляются до 19 пикселей.

19 пикселей * 100 = 1900 пикселей, что оставляет зазор в 20 пикселей.

Дополнительная информация здесь : http://ejohn.org / blog / sub-pixel-issues-in-css /

Изменить: если вы измените масштаб своего браузера, на некоторых ширинах красная часть будет больше, меньше или исчезнет; что подтверждает проблему округления.

Решение

Объявите индикатор выполнения с фиксированной шириной: 200 пикселей
Инициализируйте его до 2 пикселей, которые нельзя округлить вверх / вниз

1
KristofMols 27 Окт 2015 в 11:54