Fix blinking text issue in Firefox

I wish there was only one browser, which may make Web Developer’s life easier. But I know without compteting, we may be still using IE6 (A Terrible Browser.)

Anyway, the problem I had this time is a CSS issue in Firefox. The same code works fine in Chrome and IE (although, IE is a different in this case. I will explain this at the end.)


We have a hoveover dropdown div on the top of big carousel banners div. The transition of carousel is set to fade-in and fade-out by changing wrapper div’s opacity. We found that the text on the dropdown div is blinking as the background carousel is rotating, which is happened in Firefox 13.0.1 (probably the lower version, too.) But it works fine in Chrome and IE.


The css settings of wrapping div was like the following,

.wrapper {
    display: inline-block;
    height: 270px;
    left: 0;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 984px;

And there is a jQuery function to perform an animation on wrapper div during the transistion of carousel, like the following,

	{ opacity: '0.2'}, 
        function () {
	//some functions;

As you see, in the CSS settings of wrapper div, we did not set z-index. Although the z-index of dropdown div was already set to 12, somehow, the texts in the dropdown div is still affected when the background’s opacity changes.


The solution is actually very simple. We just need to implicitly set z-index of wrapper div to whatever number that is lower than 12 (in our case, 12 is the value of z-index of the dropdown div.) So the dropdown div and the text on it, are implicitly sitting on the top of carousel div. This fixs the text blinking issue in Firefox when the opacity of background div changes.

Final Note

As I said in the beginning of this article, IE is different in this case. That’s because, IE8 and below does not support “opacity” navtively. jQuery’s animation function must handle opacity differently, which does not cause the issue we had.