position:fixed not working on chrome but works in firefox

Question

position?:fixed not working on chrome browser but it works fine in firefox.

I have a sidebar that stop scrolls and stick to top. it works perfect in firefox but in chrome the sidebar disappears as we scroll to the sidebar position.

But the same code works on another site.. I'm confused...

my html

<div class="wraper">
<div id="fixme">
<img src="example.com/images/ps14_homepage.jpg" style="width:100%;" alt="ad image">
</div>
</div>

here is my javascript to fix the block at a certain height

var fixmeTop = $('#fixme').offset().top;
jQuery(function($) {
  function fixDiv() {
    var $cache = $('#fixme');
    if ($(window).scrollTop() > fixmeTop)
      $cache.css({
        'position': 'fixed',
        'top': '10px',
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

CSS

.wraper {float:left;display:block;position:relative; height:auto; border:1px solid #000; width:100%;}

I have a feeling that you're using css transforms in your code - http://stackoverflow.com/a/20830413/703717 — Danield, Feb 10 '15 at 11:33
can you create a jsfiddle for your problem, i tried to create it here (which may not be the actual) http://jsfiddle.net/6nb5ubak/1/ and its working fine in chrome too — Yogesh Khatri, Feb 10 '15 at 11:38
I am totally out of mind... the same code works when i put it on another website.. but I realised now that my problem is not with this code only. but it fails wherever i used "position:fixed". In my specific site "position:fixed" never works at all except firefox browser. wherever i used position:fixed it doesn't work... Is there any chances of conflict like js conflict in my CSS too ??? — Lois, Feb 11 '15 at 06:37

score 0 · Answer 1 · answered May 19 '16 at 03:20

Might not be the exact answer, but I had similar issue. In one of the parent element, I had following css. Once removed position:fixed started working fine in chrome.

.OuterContainer, .menuSld {-webkit-backface-visibility: hidden;-webkit-perspective: 1000;}

So, if you have any of these styles, try to remove it and check.

It's late to answer, but I saw many people are facing this.

position:fixed not working on chrome but works in firefox

1 Answers1