Белая линия между линейным градиентом и прямоугольником с вертикально центрированными элементами

Question

При объединении vertical-gradient и box-shadow на вертикальном центрированном элементе отображается белая линия между элементом и тенью (при определенных размерах).

Чтобы показать проблему, фрагмент кода устанавливает размер, в котором возникает эта проблема, в реальном примере высота масштабируется с помощью окна просмотра.

Эта проблема возникает в Chrome версии 71.0.3578.98 (Safari хорошо рендерится, не тестировал другой браузер).

Есть ли обходные пути, которые могли бы решить эту проблему, кроме отбрасывания градиента?

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

Answer 1

может быть, вы могли бы использовать

: * после 1004 *

.content{
    height: 96px;
    display: inline-flex;
    position: relative;
}
.box {
    width: 50px;
    margin: 0 20px;
}
.box-shadow1{
     background: radial-gradient(circle at top, #00448b 60%, #6dfff1 150%);}
 .box-shadow2{
    background: radial-gradient(circle at top, #ffec04 , #f48f11 );}
 .box-shadow1:after {
       width: 50px;
    height: 100%;
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1;
    box-shadow: 0px 0px 47px 0px #29adec;
}
 .box-shadow2:after {
    width: 50px;
    height: 20px;
    content: '';
    position: absolute;
    bottom: 0;
    box-shadow: 0px 0px 20px 0px #a67300;
}

<div class="content">
  <div class="box box-shadow1"></div>
  <div class="box box-shadow2"></div>
</div>

Answer 2

Вы можете немного увеличить background-size:

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
  background-size:100% calc(100% + 1px);
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

Или отрегулируйте положение фона внизу (если тень всегда накладывается на низ)

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%) bottom;
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>

Answer 3

Применение правила background-position-y: -1px; к градиенту, похоже, решает проблему, не оказывая негативного влияния на другие браузеры (протестировано на Firefox).

.center {
  height: 96px;
  display: inline-flex;
}

.box {
  width: 50px;
  height: 61%;
  margin: auto 0;
  margin-right: 5px;
  background-color: blue;
  box-shadow: navy 0 20px 0;
}

.box--grad {
  background: radial-gradient(circle at top, #207ee2 60%, #90bded 150%);
  background-position-y: -1px;
}

<div class="center">
  <div class="box"></div>
  <div class="box box--grad"></div>
</div>