Fixed Header Glitch in Chrome using Bootstrap

HTML & CSS
1

Hello,

I’ve developed many sites using Bootstrap’s fixed header and this is the first time I’ve run into this issue. It seems that the fixed header is having some sort of conflict with the bootstrap carousel. When the carousel goes off screen it causes the fixed header to jump around randomly (only in Chrome).

Usually in the past I notice this behavior when an element picks up a CSS transition it wasn’t meant to, but after debugging my code it does’t appear to be anything I modified. So far I am tracing it back to the properties -webkit-transition, and backface-visibility on the carousel’s .item elements.

When I disable those properties, it seems to fix the glitch but of course the carousel no longer slides… In the past I have used both the bootstrap carousel with a fixed header quite a bit and never run into this issue.

Any suggestions as to a workaround would be much appreciated.

Here is a link to see the glitch in action…
http://dev.prd-realty.com/

2

Is there any way for me to reproduce it? Steps I can take? I do believe you.

This appears to be related to some known webkit bugs.

Hard to give you exact fixes though if I can’t reproduce it on my end :frowning: .

3

Not sure if its the first bug you linked because Firefox seems to be working fine for my issue. Could be something to do with the second article you linked, so I’ll look into that.

I actually am going to be working on a site this afternoon with identical markup so I will let you know if I can get the effect to be reproduced.

Just curious but are you not able to see the chrome glitch on the site I linked?

4

Unfortunately no. These sorts of bugs I always have trouble reproducing on my system. I’m not sure what the issue is.

If I could reproduce it, I could help. I’ve had members in the past have this issue and after a while I could get the broken page, but it’s random.

5

Well I am on a Mac, so if you’re on a PC that would be good news that it could be limited to Chrome on Macs. Also, just in case… to see it you need to scroll past the carousel for the glitch to occur.

Actually I just tested it out on a crappy PC in the office and I also can not see the problem there.

6

Do you have a browserstack.com account? If not, please tell me what system you are using along with what browser version.

7

I do not, I am running OSX 10.9.5 with Chrome Version 41.0.2272.89 (64-bit)

8

Browserstack has these options

OS X Yosemite
OS X Mavericks
OS X Mountain Lion
OS X Lion
OS X Snow Leopard.

9

OS X Mavericks

10

Unfortunately browserstack did not show an issue either :frowning: .

11

Wow that is interesting, it showed up on my co-workers computer who is running Yosemite. Well hopefully that means it is an isolated issue, I do appreciate the help though.

12

I can see the header is a little jumpy after the carousel has been used (both in PC and mac but a lot worse in mac).

The usual fix is this which calms it down.

.navbar-fixed-top{
-webkit-backface-visibility:hidden;
}
13

Thanks for the reply, this issue has been haunting me on a few sites and debugging this issue seems very inconsistent. Once I feel like I make progress, it always pops up again. I will try out your suggestion and see if that helps at all.

14

It works! Thanks for the help. Just curious however, any idea what causes this?

15

Chrome gets jumpy when too many animations are going on but you can trigger a better rendering algorithm when you add backface-visibility or one of the 3d rendering engine modes.

You can find some info here.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.