When using the fadeIn() function to change the dimensions of a table, Firefox is clipping the background of the newly shown rows.
If I click away from the tab and then return, the background is restored.
This issue does not occur in Chrome. I am using Firefox 26
View JSFiddle
JavaScript
$(function () {
$(".small-link").on("click", function (event) {
$(".showfields").fadeIn(250);
});
});
CSS
.head {
background-color: green;
color:white;
}
.hidden {
display:none;
}
.small-link {
cursor:pointer;
}
table {
border:1px solid red;
}
HTML
<table>
<tr>
<td><a class="small-link">Click this</a>
</td>
</tr>
<tr class="hidden showfields">
<td>........................................</td>
</tr>
<tr class="head hidden showfields">
<th>Table Head</th>
</tr>
</table>
Additional Information:
- Simply displaying the TR works, but I prefer to fade it if possible
- Fading the TH and TD elements fixes the issue for this simple case, but may not work for more complex code