0

I am working on a site for one of my clients (it is a WordPress based site, with a 'partially' customized template base on WooThemes - Hub ).

But now I cannot get my header/menu to 'stick' at the top of the screen on mobile of small screens (and my social-sharing at the bottom).

I've tried css fixed position, but it looks like it gets overruled (even though analyzing the site with te elements inspector shows the element is position:fixed; ).

jQuery(window).scrollTop() => element.css('top') replacement are not an option because of the recalculations the header bounces over the screen when you fast scroll on mobile devices.

The site address is this

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
SAMES
  • 109
  • 1
  • 13

1 Answers1

1

So, what i found out is that it is a well known and also very old bug that (at least on Chrome, i don`t know what about other browsers) -webkit-transform and fixed CSS-position do not work together.

After some research, there has been a bug report on the Chromium website about this issue, so far Webkit browsers can't render these two effects together at the same time.

I would suggest adding some Webkit only CSS into your stylesheet and making the transformed div an image and using it as the background.

See this thread: Positions fixed doesn't work when using -webkit-transform

Community
  • 1
  • 1
Marcel Wasilewski
  • 2,519
  • 1
  • 17
  • 34
  • Hi Marcel, I have made an overrule for the transform:none (since I don't use it anyway). will remove it completely soon. Menu and social media is working great now. Thanks for the quick response. – SAMES Apr 13 '16 at 10:40