Просвечивает край нижнего элемента

Question

[Максим Маликов]

Страница — smartprogress.ru/goal/2149/



Вверху страницы есть прогресс бар.
Его конструкция: div с фоном в виде градиента, внутри div с коричневым фоном является шторкой, закрывающий фон градиента. При изменении ширины шторки, меняется величина прогресса (видимая область градиентной полоски).
Сделано это так, потому что необходимо, что бы градиент перетекал по всей длине прогресс бара, даже по не видимой, т.е. что бы цвет правого края прогресс бара менялся в зависимости от величины прогресса.
Проблема в том, что по краям прогресс бара градиентная полоса просвечивает над коричневой шторкой (показано на скриншоте сверху). Уже несколько дней бьюсь с проблемой, может кто нибудь подсказать возможно ли добиться желаемого эффекта без данного глюка, и если возможно то как?

Прототип: jsfiddle.net/Rjfq7/3/

Answer 1

[Makito]

Вот оно — веяние современных технологий…
Наверное вы не застали времен, когда такие вещи делались запросто на картинках. И не тратили бы сейчас на такое несколько дней.
По-старинке не тру такое сделать?

Comments

[Максим Маликов]

Почему не застал? очень даже застал. Даже в данном случае вначале использовал картинку, но все осложнилось тем, что было принято решение делать ширину прогресс бара динамической. Т.е. если число этапов в цели много, не лепить их воедино а увеличивать прогресс бар и использовать прокрутку, как например тут — smartprogress.ru/goal/2525/
Из-за своей не постоянной ширины и градиентного цвета использование картинки тут не представляется возможным…

[Makito]

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

[Сергей Протько]

Отчего же не возможно? более чем возможно. Ну да не суть.

Answer 2

[Максим Маликов]

Да не я, это все злые дизайнеры :) А в чем ужас то? :) Вроде симпатично :)
Каким образом это сделать на картинках, если от ширины прогресс бара зависит рисунок градиента? т.е. для каждой ширины рисунок (длина перетекания) будет своя — уникальная.

Comments

[Максим Маликов]

это предполагалось написать комментарием…

[Makito]

Вообще сама суть шкалы — видеть общую картину прогресса, а тут мы видим какой то кусок, причем я уже устал мотать после пятого клика, а на сколько я понял там еще мотать и мотать до конца то :)
Советую вашим дизайнерам пересмотреть виджет.
Ну тогда как вариант — самый последний уровень дива с классом progress, сделайте его пошире чем родитель, тогда он будет больше перекрывать зеленую подложку с краев.

[Makito]

Хотя нет — так тоже не выйдет.
А вам обязательно делать конструкцию с тремя вложенными дивами?
Попробуйте так:

<div class="progress_bar_wrap"><div class="progress_bar" style="
    width: 90%;"></div></div>

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

[Максим Маликов]

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

[Максим Маликов]

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

[Максим Маликов]

>Советую вашим дизайнерам пересмотреть виджет.
Теперь это действительно придется сделать, просто изначально казалось вполне решаемой задачей. Лично мне кажется это браузерным глюком то, что фон нижнего элемента просвечивается над верхним. Поэтому и не могу допустить что тут возникнут какие-то проблемы…

[Makito]

Да, эта проблема наблюдается только в хроме, а в фоксе например все хорошо.

[Максим Маликов]

в фоксе тоже этот глюк есть, если убрать коричневый фон панели. Тут — jsfiddle.net/Rjfq7/3/ это хорошо видно