0

This is in Chrome only! I have a div with a fixed background image a ways down after a slider at the top of the page. (It's the section with the vimeo video in it) The background image that is fixed almost completely disappears when the slider advances to the next slide. I though maybe it was a z-index issue and also removed "-webkit-backface-visibility: none;" from the css but neither were the answer. I'm sure it's something to do with the css3 animations but also completely stumped. Any ideas?

A link to the page in question: http://ksdesigning.com/themes/room_html/

Thanks

Micha
  • 5,117
  • 8
  • 34
  • 47
joughbagh
  • 1
  • 2

1 Answers1

0

I hate bugs like this, here is a fix that should work. It just hides the slider once someone has scrolled past it and shows it if they scroll up to it.

$window.scroll(function() {

    var _scroll = $window.scrollTop();

    if (_scroll >= 650) {
       $('#slider').hide();
    }else if (_scroll <= _triggerOffset){
       $('#slider').show();
    }

});

Otherwise play around with the examples on this link. ( I could not get them to work so I made the way above)

Prevent flicker on webkit-transition of webkit-transform

Community
  • 1
  • 1
Chris G-Jones
  • 596
  • 4
  • 13
  • 26
  • Thanks for responding. I had actually tried that but then of course I ran into issues with the slider while it was hidden. The slider breaks if it advances while hidden. I also tried pausing the slider on ".hide()" through its own pause method but ran into other issues there as well so I'm desperately trying to fix it without getting into the sliders javascript but I may have to in the end. I tried the suggestions in the answer you linked but didn't have any luck either =/ – joughbagh Aug 08 '13 at 05:51