CODEWITHSUNDEEP
htmlanimationcss
Tallboy
Tallboy

Reputation: 13467

Why does my text flicker?

I build this site, Pineapple tutorials, which I want to have a fixed header (the black bar).

Right now, it's not fixed because of this problem, but you can imitate it by using chrome inspector or firebug, and select .header (the black bar)

Assign the following properties

position: fixed;
width: 100%;
z-index: 9999;

Now, when its all set to fixed, slowly scroll the page and watch the text as it rolls over the Search box... it should fade to weird text that looks flakey.

I can't tell if its because

A) I'm using @font-face on the black bar

B) I have a css3 animated logo (mouse over the logo). I noticed this causes some weird glitches as its animating (if you look at the right most description of my site you can see the text slightly flake out as its animating)

Any ideas would be awesome, thanks!

EDIT: I noticed this in the latest version of chrome beta

Upvotes: 0

Views: 183

Answers (2)

UrbanDude
UrbanDude

Reputation: 436

I'm not able to reproduce the problem in Chrome Inspector. Is it possible it's a local machine issue? I've seen this before with specific video cards (and drivers), and when I try it on another machine, the problem doesn't exist.

Upvotes: 1

Ariel
Ariel

Reputation: 26783

I get no flicker. Getting flicker is a function of your browser, OS, GPU, and other things.

I used to get flicker from position fixed elements all the time, but with my newer browser I don't. (I hated them so much I installed an extension to let me get rid of elements I don't want.)

There is nothing you can do about it. Just try to decide if the header bar REALLY needs to be there all the time.

In my opinion it most definitely does not! The info there is not something you need constantly. If people want the faq, etc they can scroll up. It looks nice, yes, but it's not necessary.

Upvotes: 1

Related Questions