{"id":78,"date":"2013-02-24T04:02:01","date_gmt":"2013-02-24T04:02:01","guid":{"rendered":"http:\/\/burnhamup.com\/blog\/?p=78"},"modified":"2013-02-24T04:02:01","modified_gmt":"2013-02-24T04:02:01","slug":"interesting-chrome-css-bug","status":"publish","type":"post","link":"https:\/\/burnhamup.com\/blog\/2013\/02\/interesting-chrome-css-bug\/","title":{"rendered":"Interesting Chrome CSS Bug"},"content":{"rendered":"<p>We&#8217;ve been seeing an interesting bug show up in Chrome at work. We&#8217;ve been trying the CSS 3 feature that lets you use &#8216;even&#8217; and &#8216;odd&#8217; selectors to<a href=\"http:\/\/www.w3.org\/Style\/Examples\/007\/evenodd.en.html\"> alternate coloring of rows in a data table.<\/a><\/p>\n<div id=\"attachment_80\" style=\"width: 594px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/burnhamup.com\/blog\/2013\/02\/interesting-chrome-css-bug\/before\/\" rel=\"attachment wp-att-80\"><img aria-describedby=\"caption-attachment-80\" decoding=\"async\" loading=\"lazy\" class=\" wp-image-80\" alt=\"before\" src=\"http:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/before-1024x213.png\" width=\"584\" height=\"121\" srcset=\"https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/before-1024x213.png 1024w, https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/before-300x62.png 300w, https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/before-500x104.png 500w, https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/before.png 1051w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/><\/a><p id=\"caption-attachment-80\" class=\"wp-caption-text\">Dummy data from a scholarship system<\/p><\/div>\n<p>The upper left cell is colored blue, the rest of the the first row is white. Clicking on the table, or other actions that cause Chrome to re-render correct the table.<\/p>\n<p><a href=\"http:\/\/burnhamup.com\/blog\/2013\/02\/interesting-chrome-css-bug\/after\/\" rel=\"attachment wp-att-79\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-79\" alt=\"after\" src=\"http:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/after.png\" width=\"720\" height=\"219\" srcset=\"https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/after.png 720w, https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/after-300x91.png 300w, https:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/01\/after-500x152.png 500w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>Interestingly, the first row becomes blue and the second row becomes white.<\/p>\n<p>You can see a simple demonstration\u00a0<a href=\"http:\/\/burnhamup.com\/blog\/wp-content\/uploads\/2013\/02\/table.html\">here<\/a>.<\/p>\n<p>Here&#8217;s the relevant CSS:<\/p>\n<pre>.content-style table.dataTbl tr td {\r\n background-color: #E6E8FA;\r\n}<\/pre>\n<pre>.content-style table.dataTbl tr.odd td, .content-style table.dataTbl tr:nth-child(odd) td {\r\n background-color: #FEFEFE;\r\n}<\/pre>\n<p>So what causes the problem?<\/p>\n<p>The major difference between the examples I looked at and our code was that our code puts the background-color on the td and not the tr. After removing the td from the code, the problem went away. Why does applying the style to the td element cause the bug to occur in the first place?<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve been seeing an interesting bug show up in Chrome at work. We&#8217;ve been trying the CSS 3 feature that lets you use &#8216;even&#8217; and &#8216;odd&#8217; selectors to alternate coloring of rows in a data table. The upper left cell &hellip; <a href=\"https:\/\/burnhamup.com\/blog\/2013\/02\/interesting-chrome-css-bug\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":10,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/burnhamup.com\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}