CSS linear-gradient chrome bug
Tested in Chrome 28.0.1500.95
HTML
<p>Transition between two colors below should be a sharp edge. Sharp in Safari & Firefox. 1px banding in Chrome 28.0.1500.95.</p>
<div class="box box1">150px color stop</div>
<div class="box box2">50% color stop</div>
CSS
body {
background: #ccc;
}
.box {
color: #fff;
float: left;
height: 200px;
margin-right: 10px;
text-align: center;
width: 200px;
}
.box1 {
background: -webkit-linear-gradient(#043753 100px, #fff 100px);
background: -moz-linear-gradient(#043753 100px, #fff 100px);
background: -o-linear-gradient(#043753 100px, #fff 100px);
background: -ms-linear-gradient(#043753 100px, #fff 100px);
background: linear-gradient(#043753 100px, #fff 100px);
}
.box2 {
background: -webkit-linear-gradient(#043753 50%, #fff 50%);
background: -moz-linear-gradient(#043753 50%, #fff 50%);
background: -o-linear-gradient(#043753 50%, #fff 50%);
background: -ms-linear-gradient(#043753 50%, #fff 50%);
background: linear-gradient(#043753 50%, #fff 50%);
}