Sticky Header Not Working On Chrome

Stench Blossoms

Hi,

I have sticky header enabled and it works fine on Firefox but it won't work for me on Chrome.

Using Version 26.0.1410.65 of Chrome on OS X 10.7.5

Any idea why this could be?

Boards.ie: Danny

Could be a few things - most likely you're being detected as having a touch screen and for touch screens we forcibly disable the sticky header.

To test this: Press F12, change to the Console tab and type in the following and hit enter

!!('ontouchstart' in window);

True or false should be displayed, please let us know which.

Danny

Stench Blossoms

False

Boards.ie: Danny

That's grand, so it's not touch screen detection. Please visit http://www.boards.ie/diagnostics and post your details here. Do not post your IP address, leave that field out

Danny

Stench Blossoms

Got undefined when I put that in and it didn't change anything.

Boards.ie: Danny

I adjusted my previous post to point you to the diagnostics page

Stench Blossoms

Here it is

Diagnostics Page
Your System

IP Address:

Operating System: Mac OS X

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.65 Safari/537.31

Your Browser

Javascript Enabled: Yes

Cookies Enabled: Yes

Java Enabled: Yes

Flash Version: 11.7 r700 installed

Your Resolution

Screen: 1440 x 900

Current Browser: 1309 x 731

Colour: 24 bit

Our Server

Date/Time: Monday 22nd of April 2013, 10:52:41

Name: www.boards.ie (clifford)

LocalStorage

LS/SS Enabled: Yes

Followed Forums:

Stench Blossoms

Any update on this?

Boards.ie: Danny

It seems to be restricted to your machine, we've had no more reports. Are you at all familiar with the Chrome Inspector (F12)? If not then debugging is going to prove difficult.

Danny

Stench Blossoms

I'm familiar with it.

Boards.ie: Danny

Can you inspect your header element - right click and inspect to the left of the Boards.ie logo. The CSS classes applied (on the right) should not reference a file called fixed-header.css but they probably do?

Mimikyu

This post has been deleted.

Boards.ie: Danny

Captain Morgan wrote: »

This post has been deleted.

Because support for CSS position:fixed (which sticks the menu) is awful on touch devices at this time and feature detection for support of position:fixed is unreliable at best.

Danny

Stench Blossoms

I don't see it there.

Boards.ie: Danny

As you can see in the inspector you've highlighted <div class="holder"> - right above that is <div id="header"> which is the one you need to click and inspect.

Danny

Stench Blossoms

Sorry about that

Boards.ie: Danny

Thanks for that, we're getting there It's good to see that the fixed-header CSS isn't being applied so your style options are fine. You are falling foul of a media rule designed to detect iPads and smaller screens but I'm not sure which rule since your browser is larger than 1024x768.

Can you go to the console tab and type "window.devicePixelRatio" and hit enter for me? A number should be returned, is it 2?

Danny

Stench Blossoms

It's 2 yeh.

Boards.ie: Danny

Fair enough, that'd be the issue. On my monitor it's 1. I'm guessing Chrome's method of detecting pixel ratio changed recently and is now reporting a 2 for your device. I'll see if we can make adjustments to our media rules to cope with this by not relying on pixel density alone.

Danny

Boards.ie: Danny

You're on a retina display Macbook, aren't you?

Danny

Stench Blossoms

Boards.ie: Danny wrote: »

You're on a retina display Macbook, aren't you?

Danny

I am

Boards.ie: Danny

Cannot believe it took me so long to come to that conclusion Chrome is reporting your pixel ratio just fine. The reason it works on Firefox is that we're not including mozilla in our media rules, only webkit (Chrome/Safari). We'll have a look at what we can do but for now if you'd like a sticky header I'd suggest using Firefox.

Danny