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.

before

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.

after

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

  1. Chris says:

    UPDATE:
    As of Chrome version 25 the bug has been fixed. Maybe the Dev team saw my blog post? (Or more likely, the bug report I sent in).

Leave a Reply

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