Fixed Position Fucked Up When Scrolling in Gecko Engine Browsers

I like the idea of keeping the footer area always visible on the bottom of the browser window, so i did it to the Rockaby’s theme, I applied fixed position rule into the footer div like this.

#footer  {height:104px;width:100%;color:#fff;font-size:1.3em;background:url(img/footer.png) repeat-x ;position:fixed;bottom:0;z-index:8;}

The footer should always stand on the bottom of the browser window in spite of scrolling. I knew IE6 couldnt understand fixed position rule. I’ve tested it in IE7,Konqueror,Opera…all work well,except Firefox. When the page loads much information and objects, scrolling quickly may fuck up the whole page, lets see the 2 pictures below .

It looks quite well as the footer standing on the bottom of the visible area in Firefox browser window.

Then I just scroll the window, ooh, it really fucked up. And it wont be okay unless I minimize it or switch to another tab. The browser takes too much time to render the fixed object. I’ve tried it in FF1.5 and FF2.0, Flock, SeaMonkey and K-Meleon (all in Gecko Engine), no luck.

This is a bug in Gecko Engine Browser, and no solution AFAIK. All you can do is make sure that the page doesnt load a LOT of objects or give up the fixed position idea. Fortunately, the Mozilla developers have noticed this problem,I tried the latest nightly build of Firefox 3 (a3pre),it works much better (though still far from perfect).

Anyway, I dont feel like to give up the fixed position idea so far.

Clearfix doesnt works well in :after pseudo element in Konqueror (KHTML)

The well-known clearfix CSS tip is used to close the floating objects. I added this rule to make drop cap typographical effects for the first letter in each blog entry.

.entry > p:first-child:first-letter { font: 30px Times,Georgia,Verdana,'Lucida Grande',Sans-Serif; text-transform: uppercase; float: left; margin-right: 8px; padding-top: 4px }

To close the floating, and make sure the floating paragraph wont mess up the others. I applied this clearfix rule into the first paragraph’s :after pseudo

.entry > p:first-child:after {content:".";display:block;height:0;clear:both;visibility:hidden;text-indent:-9999em;}

It works well in Firefox and Opera, but Konqueror maybe misunderstand it. See the image below, the content of the :after pesudo element is visible!

Thanx to Thomas’s CSS hacks series and the other browsers’ bad CSS3 compliance. We’ll be able to ‘fix’ it by a pure CSS3 way.

html:not(:nth-child(1)) ... { ... }

This rule is only recognized by Konqueror,thx to its fantastic support on CSS3 selectors. So i applied this rule:

html:not(:nth-child(1)) .entry > p:first-child:after {content:""}

To give a null content to the :after pseudo element. And please notice, actually the content is still there, but becuz its null, so nothing we can see.

And definitely you can use this hack to apply specific rules on Konqueror at hand (before other browsers give support on :not and :nth-child pseudo)