CODEWITHSUNDEEP
cssgoogle-chromecss-transitions
maddi.joyce
maddi.joyce

Reputation: 33

Strange Chrome TD background-color issue

A combination of CSS causes a strange issue in Chrome and not Safari or Firefox.

I'm using a max-height transition to hide the content when the input isn't focused:

.suggestions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
input:focus ~ .suggestions {
  max-height: 300px;
}

I also have CSS to set the background-color of a table cell when it's got the selected class.

tr:nth-child(odd) {
  background-color: light-blue;
}
td.selected {
  background-color: dark-blue;
}

On Firefox and Safari everything works fine, but on Chrome when I focus the input, the background-color is missing.

Is this a Chrome bug or am I missing something?

How it should look:

enter image description here

How it Actually Looks:

enter image description here

You can see this issue in this jsfiddle- https://jsfiddle.net/a7mboskj/. Focus on the input in chrome and the 2nd cell won't have a green background. In Safari or Firefox it does have the green background.

Upvotes: 2

Views: 1856

Answers (1)

Harry
Harry

Reputation: 89780

As I had noted in comments, td.selected does show up with green background in Chrome Version 38.0.2125.101 m but it does not work in the latest Chrome. It seems to be a regression in behavior or possibly an informed decision to make it not work. I can't comment on why the behavior has changed but in my opinion it is a regression.

There is a however a fix available for the latest version of Chrome. The part that seems to be causing the trouble is the background-color: white that is applied to the tr. Remove it from tr and apply the white background to the td instead. This seems to make it work properly.

This works fine in Chrome v48.0.2564.22 dev-m, Chrome v38.0.2125.101 m, Safari v5.1.7 (on Win 7) IE11, IE10, IE9, Edge, Opera and Firefox.

.suggestions {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
}
input:focus ~ .suggestions {
  max-height: 500px;
}
table, input {
  width: 100%;
}

tr {
  /* background-color: white; remove this */
}
td {
  width: 14.258%;
  cursor: pointer;
  position: relative;
  background-color: white; /* add it here */
}
td:hover {
  background: blue;
  color: white;
}
td.selected, td.selected:hover {
  background: green;
}
<div class="field">
  <input type="text" />
  <div class="suggestions">
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td class="selected">2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td>6</td>
          <td>7</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 1

Related Questions