Interesting Chrome CSS Bug

We’ve been seeing an interesting bug show up in Chrome at work. We’ve been trying the CSS 3 feature that lets you use ‘even’ and ‘odd’ selectors to alternate coloring of rows in a data table.


Dummy data from a scholarship system

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.


Interestingly, the first row becomes blue and the second row becomes white.

You can see a simple demonstration here.

Here’s the relevant CSS:

So what causes the problem?

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?


This entry was posted in Neat Tricks. Bookmark the permalink.

One Response to Interesting Chrome CSS Bug

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.