Demonstrates a bug in how Chrome 2014 incorrectly renders background gradients

Chrome-Gradient-Sizing-Alignment-Bug.md

Chrome Gradient Sizing/Alignment Bug

Demonstrates a bug in how Chrome 2014 incorrectly renders background gradients

A Pen by Gavin Elster on CodePen.

License.

index.slim

h1 Chrome Gradient Sizing/Alignment Bug

p The following blocks have background gradients that should evenly divide right down the middle. They also contain two-cell tables. 
p Correct behavior should have the table cell border and background gradient align in the middle. 
p However, on Chrome 38.0.2125.104 the red portion of the gradient appears wider. It appears to be a rounding error, as the error becomes more visible at larger widths.

h2 Percentage Gradient
p
  code background: linear-gradient(to right, red 50%, green 50%)
.percentage-gradient
  table
    tr
      td
      td
      
h2 Pixel Gradient
p
  code background: linear-gradient(to right, red 5000px, green 5000px);
  br
  code background-position: center;
  br
  code background-size: 10000px;

.pixel-gradient
  table
    tr
      td
      td

style.css

.percentage-gradient {
    background: linear-gradient(to right, red 50%, green 50%);
}
.pixel-gradient {
  background: linear-gradient(to right, red 5000px, green 5000px);
  background-position: center;
  background-size: 10000px;
}

.gradient,
table {
    width: 100%;
    height: 100px;
}

table { border-collapse: collapse; }
td { border: 1px solid blue; }
body { font-family: Avenir Next, Helvetica Neue, sans-serif; }