136858 2014-09-16 08:01:00 -0700 Backgrounds applied to <td> on nth-child rather than <tr> 2022-07-13 17:30:01 -0700 1 1 1 Unclassified WebKit CSS 525.x (Safari 3.2) All All NEW InRadar P2 Normal --- 1 nickdeeleyitg webkit-unassigned bfulgham webkit-bug-importer oldest_to_newest 1035466 0 nickdeeleyitg 2014-09-16 08:01:00 -0700 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. 1883498 1 bfulgham 2022-07-13 17:29:51 -0700 This continues to be a problem in Safari 15.5+ 1883499 2 webkit-bug-importer 2022-07-13 17:30:01 -0700 <rdar://problem/96983194>