Backgrounds applied to <td> on nth-child rather than <tr>

• Component: CSS
• Status: NEW ---

Webkit applies backgrounds to <td>'s rather than the <tr>'s in the following code:

tr:nth-child(odd)
{background:#ffffff;}

tr:nth-child(even)
{background: #000000; /* Old browsers */
background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #000000 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000000 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to right, #000000 0%,#ffffff 100%); /* W3C */ */}

Have created a jsfiddle here: http://jsfiddle.net/fmcx07f7/3/

Tested in Chrome, Safari and Firefox. Firefox displays it as per the W3C spec, whereas the webkit browsers do not do this.

According to the W3C spec: http://www.w3.org/Style/Examples/007/evenodd.en.html
The <tr>'s should be the one having the background, rather than the child of the <tr>, which in this case is the <td>. I'm using gradients to highlight this, as the problem appears "invisible" using plain colours.

[Brent Fulgham]

This continues to be a problem in Safari 15.5+

[Radar WebKit Bug Importer]

<rdar://problem/96983194>