Demonstrates a bug in how Chrome 2014 incorrectly renders background gradients
A Pen by Gavin Elster on CodePen.
Last active
March 11, 2025 01:19
-
-
Save elstgav/8150804b3f918e60abf9 to your computer and use it in GitHub Desktop.
Demonstrates a bug in how Chrome 2014 incorrectly renders background gradients
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment