JQuery flickers when animating opacity and opacity reaches 1
Here is the scenario of the problem:
Here's the markup (copied + pasted from jsfiddle, so script tags etc are missing):
tr
{
visibility:hidden;
background-color:#cccccc;
}
<table>
<thead>
<th style='width:100px'>Bibble</th>
<th style='width:100px'>Fish</th>
</thead>
<tbody>
<tr>
<td>Some data!</td>
<td>Some more data!</td>
</tr>
</tbody>
</table>
$(document).ready(function()
{
$('tr').css('visibility', 'visible').css('opacity', 0).animate({ opacity: 1 }, 2000);
});
If I animate the opacity of 0.9999, that's fine. What happens when transparency reaches 1 and how can I help it?
source to share
This is a known bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=656948
There is a hack to avoid this correspondence: http://jsfiddle.net/7v7Rg/ You should animate to 0.999 opacity, wait a minute (one second works for me) and set the opacity to 1.
source to share
Sorry I got distracted for so long ... :( Anyway, here's your answer if you don't figure it out ... The magic is in text-align: center BUT be sure to change the jquery code like this (NOTICE: "table") :
$(document).ready(function() {
$('table').css('visibility', 'visible').css('opacity', 0).animate({opacity: 1 }, 2000);
});
Here's a Fiddle
table
{
visibility:hidden;
background-color:#cccccc;
width:385px;
margin:0 auto;
}
td{text-align:center;}
th{text-align:center;}
source to share
I think it has something to do with GPU acceleration. I tested my theory by adding the following:
tr {
-webkit-font-smoothing: antialiased;
}
With this in place, I think the font renders and fades out where in your jsfiddle it gets re-emitted when the opacity reaches 100%. This may or may not be an issue in IE9 / 10 / Gecko browsers; you'll have to check there and see if you can fool the acceleration by smoothing the text.
source to share