Почему chrome не сглаживает градиент?

#css #google_chrome #градиент

                    
Если при создание градиента указывать угол в 30 градусов, то в chrome появляются
лесенки. В firefox вся сглаживается хорошо. Если угол 45 градусов, то также в chrome
отображается нормально. Можно ли это как то исправить ?

http://codepen.io/anon/pen/jPexJr



#triangle {
  width: 100%;
  height: 1px;
}
#triangle:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50%, transparent
100%);
  background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent
50%, transparent 100%);
}
#triangle:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50%, transparent
100%);
  background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent
50%, transparent 100%);
}




    

Ответы

Ответ 1

Дело в том, что границы цветов (или прозрачности) чётко совпадают. При этом, нет
места для сглаженного перехода, и какой-либо интерполяции. При указании стыков, оставляйте
небольшой запас (под каждый случай, подбирается экспериментально). Например, в вашем
коде, было достаточно развести границы друг от друга всего на 0.5 пикселя(!):



#triangle {
  width: 100%;
  height: 1px;
}
#triangle:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(30deg, #d3bba3 0%, #d3bba3 50%, transparent 50.5%,
transparent 100%);
  background: -webkit-linear-gradient(60deg, #d3bba3 0%, #d3bba3 50%, transparent
50.5%, transparent 100%);
}
#triangle:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(-30deg, #dae5e7 0%, #dae5e7 50%, transparent 50.5%,
transparent 100%);
  background: -webkit-linear-gradient(-240deg, #dae5e7 0%, #dae5e7 50%, transparent
50.5%, transparent 100%);
}